React TypeError: Cannot read properties of undefined (reading 'exports') about vite-plugin-federation HOT 20 CLOSED

can we reopen this issue? cause it still exist in the latest version？

from vite-plugin-federation.

Thanks for the heads up @ruleeeer

Confirmed it has resolved my issue.

Have pushed a new commit to my demo with fix for anyone else philals/reading-exports-issue@5011512

from vite-plugin-federation.

Has there been any answer to the issue of using hooks in the remote app and crashing the host app? I am unable to find a solution that works for this issue. I love Vite and want to stick with it, but I am now afraid I will have to go back to webpack to get module federation with hooks working. Thank you.

from vite-plugin-federation.

In my case it was that I imported React multiple times in my build (in my UI kit and in my project).
So I had to fill external and output.globals of my vite.config of my UI kit with :

  build: {
...
    rollupOptions: {
      plugins: [],
      external: ["react", "react-dom"],
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
      },
    },
  },

from vite-plugin-federation.

I recommend using React.useState instead of useState, or you can continue to use useState but need to start the host using build&serve mode (instead of the existing dev)

from vite-plugin-federation.

The root cause of this problem is the need to keep the shared product consistent in esbuild (vite dev mode) and rollup (vite build mode), otherwise it will cause problems, esuild and rollup are consistent in the esm library, but unfortunately react is a cjs library, if react switch to esm this problem does not exist, otherwise you can only use some specific usage to circumvent

from vite-plugin-federation.

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.

link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend

remote app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

from vite-plugin-federation.

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.

link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend

remote app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

Hi!

Same error here.. can't find a fix.

from vite-plugin-federation.

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.
link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend
remote app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

Hi!

Same error here.. can't find a fix.

me too,Did you solve the problem ？

from vite-plugin-federation.

I have two react apps configured with vite and this plugin. I tried building them and served through preview, still not able to get them work together. I am not sure of what is going wrong with sharing my dependencies. I was actually sharing material-ui in the remote component (which failed), so I tried using useState but failed.
link to my repo https://github.com/SaiMadhav9494/vite-micro-frontend
remote app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5000,
  },
  preview: {
    port: 5000,
  },
  plugins: [
    react(),
    federation({
      name: 'NavBarVite',
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App.tsx'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

host app:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'
import {dependencies} from './package.json'

// https://vitejs.dev/config/
export default defineConfig({
  server:{
    host: 'local.ravenslingshot.com',
    port: 5001,
  },
  preview: {
    port: 5001
  },
  plugins: [
    react(),
    federation({
      name: 'host-vite',
      remotes: {
        NavBarVite: 'http://local.ravenslingshot.com:5000/assets/remoteEntry.js'
      },
      shared: {
        ...dependencies,
        react: {
          requiredVersion: dependencies['react']
        },
        "react-dom": {
          requiredVersion: dependencies['react-dom']
        }
      }
    })
  ],
  build: {
    target: 'esnext',
    minify: false,
    cssCodeSplit: false
  },
})

Hi!
Same error here.. can't find a fix.

me too,Did you solve the problem ？

Same error here, any idea about this?

from vite-plugin-federation.

This error is still happening for me on version "1.2.0" and it is blocking us

Managed to get Module Federation working with this package https://www.npmjs.com/package/@happening/vite-plugin-esm-federation
But this package also has some limitations -> for example, I can't get it to work with non "production" vite modes. It just not generating federation.json file for some reason

from vite-plugin-federation.

This error is still happening for me on version "1.2.0" and it is blocking us

Managed to get Module Federation working with this package https://www.npmjs.com/package/@happening/vite-plugin-esm-federation But this package also has some limitations -> for example, I can't get it to work with non "production" vite modes. It just not generating federation.json file for some reason

@IlyaKukarkin that plugin is something I threw together quickly to get around the lack of React support in the latest versions of this plugin by OriginJS. I didn't actually mean for others to find it and use it (think I even have a disclaimer there somewhere in the readme). Here, I've open sourced it, so feel free to read through the code and fix any issues you come across. Keep in mind federation.json won't be generated on the first pass when you initially load the project in dev mode, because vite processes the modules asynchronously after the page had already loaded, but this plugin requires the files to already be known once index.html loads, so you need to keep refreshing it until vite's done building everything. One possible fix would be to send an event via the WS connection from vite dev server once all packages are done building and reload the page as a result of that.

from vite-plugin-federation.

Is it official that this plugin doesn't support:

host - running in dev
remove - running in build

I can't make it work.

from vite-plugin-federation.

Hi, is anybody find any solution for this issue?

from vite-plugin-federation.

Hi, is anybody find any solution for this issue?

getting the same error here, I was trying to federate module between vite and webpack but couldn't find a way to get react to work correctly

from vite-plugin-federation.

Hi, is anybody find any solution for this issue?

getting the same error here, I was trying to federate module between vite and webpack but couldn't find a way to get react to work correctly

i have the same problem

from vite-plugin-federation.

Similar problem here

index-dfe0d2a8.js:40 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at react_production_min.useContext (index-dfe0d2a8.js:76:6225)

from vite-plugin-federation.

same problem:

__federation_shared_react-JNWbGlzI.js:59 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at react_production_min.useContext (__federation_shared_react-JNWbGlzI.js:59:144)

from vite-plugin-federation.

I'm also hitting this issue and I'm close to switching back to webpack to try to get it working there. I've tried the shared solution as well as switching to React.useState, React.useEffect, etc... but new issues keep popping up.

Trying the solution from @stouch didn't work for me as I get the error that react is a module. @stouch if you have your full vite.config it would be great to see it to see what I'm doing wrong. However, i would love to see a more involved example in the example apps repo that works here if possible. Thanks for this plugin, unfortunately it doesn't seem to work for me.

from vite-plugin-federation.

Same error....

host - build preview
remote - build preview

remote using https://lexical.dev/, if not using this lib, no issues.

from vite-plugin-federation.