originjs/vite-plugin-federation

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

philals opened this issue · 21 comments

philals commented

Thanks for spending the time to read this issue.

I have read and attempted fixes listed here:

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')

image

image

ruleeeer commented

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 commented

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 commented

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

  • 👍1
  • 🎉1
  • ❤️1
SaiMadhav9494 commented

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

image

ccreusat commented

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

image

Hi!

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

Yulingsong commented

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

image

Hi!

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

me too,Did you solve the problem ？

mndbndr commented

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.

  • 👍1
ytftianwen commented

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

image

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

me too,Did you solve the problem ？

Same error here, any idea about this?

ytftianwen commented

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

  • 👍11
IlyaKukarkin commented

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 commented

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 commented

Is it official that this plugin doesn't support:

host - running in dev
remove - running in build

I can't make it work.

yuvalbne commented

Hi, is anybody find any solution for this issue?
Screenshot 2023-07-16 at 18 19 36

pt-hieu commented

Hi, is anybody find any solution for this issue? Screenshot 2023-07-16 at 18 19 36

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 commented

Hi, is anybody find any solution for this issue? Screenshot 2023-07-16 at 18 19 36

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 commented

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 commented

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 commented

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",
        },
      },
    },
  },
  • 👍1
peterholcomb commented

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 commented

image

Same error....

host - build preview
remote - build preview

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

asishmindfire commented

image

Same error....

host - build preview remote - build preview

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

Any solutions ???