React TypeError: Cannot read properties of undefined (reading 'exports')

[philals]

Thanks for spending the time to read this issue.

I have read and attempted fixes listed here:

• simple-react-esm React code errors #162
• TypeError: Cannot read properties of undefined (reading 'exports') #122
• Issue with shared react dependency #161

Both host and remote are Vite projects

Versions

"@originjs/vite-plugin-federation": "1.1.4",

Reproduction

Clone this repo https://github.com/philals/reading-exports-issue/

cd into each directory and run npm install && npm run watch. This will run the container in dev mode (localhost:3000) and the remote served statically on localhost:3001

Confirm working

Uncomment this line: https://github.com/philals/reading-exports-issue/blob/master/app/src/App.tsx#L6

Refresh browser, issue encountered.

Additional Details

Steps to reproduce

Above

What is Expected?

All working

What is actually happening?

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'exports')

[ruleeeer]

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)

[ruleeeer]

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

[philals]

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

[SaiMadhav9494]

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
  },
})

[ccreusat]

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.

[Yulingsong]

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 ？

[mndbndr]

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.

[ytftianwen]

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?

[ytftianwen]

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

[IlyaKukarkin]

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

[danielkov]

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.

[norman-ags]

Is it official that this plugin doesn't support:

host - running in dev
remove - running in build

I can't make it work.

[yuvalbne]

Hi, is anybody find any solution for this issue?

[pt-hieu]

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

[Vincent1993]

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

[stouch]

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)

[PhongLeeHiChat]

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)

[stouch]

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",
        },
      },
    },
  },

[peterholcomb]

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.

[timwuhaotian]

Same error....

host - build preview
remote - build preview

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

[asishmindfire]

Same error....

host - build preview remote - build preview

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

Any solutions ???