[originjs:federation] Cannot read properties of undefined (reading 'entries')

[Volene]

Versions

• originjs: 1.0.1
• "vite": "^2.6.13",
• "@vitejs/plugin-react": "^1.0.7",
• node:
• react latest

When i run vite buil i get this error // [originjs:federation] Cannot read properties of undefined (reading 'entries') // error during build: // TypeError: Cannot read properties of undefined (reading 'entries') // at Object.outputOptions (F:\intelprogramfiles\x\packages\home\node_modules\@originjs\vite-plugin-federation\dist\index.js:1953:62) // at Object.outputOptions (F:\intelprogramfiles\x\packages\home\node_modules\@originjs\vite-plugin-federation\dist\index.js:2277:89) // at PluginDriver.runHookSync (F:\intelprogramfiles\x\packages\home\node_modules\rollup\dist\shared\rollup.js:22688:25) // at PluginDriver.hookReduceArg0Sync (F:\intelprogramfiles\x\packages\home\node_modules\rollup\dist\shared\rollup.js:22605:33) // at getOutputOptions (F:\intelprogramfiles\x\packages\home\node_modules\rollup\dist\shared\rollup.js:23469:54) // at getOutputOptionsAndPluginDriver (F:\intelprogramfiles\x\packages\home\node_modules\rollup\dist\shared\rollup.js:23464:12) // at handleGenerateWrite (F:\intelprogramfiles\x\packages\home\node_modules\rollup\dist\shared\rollup.js:23441:74) // at Object.write (F:\intelprogramfiles\x\packages\home\node_modules\rollup\dist\shared\rollup.js:23408:20) // at generate (F:\intelprogramfiles\x\packages\home\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:43137:64) // at doBuild (F:\intelprogramfiles\x\packages\home\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:43150:26)

Additional Details

import { defineConfig } from 'vite'; import federation from '@originjs/vite-plugin-federation'; import banner2 from 'rollup-plugin-banner2'; import react from '@vitejs/plugin-react'; import commonjs from '@rollup/plugin-commonjs'; import path from 'path'; const sharedModules = { react: '*', 'react-dom': '*', 'react-router-dom': '*', '@material-ui/core': '*', '@material-ui/icons': '*', '@material-ui/styles': '*', '@material-ui/lab': '*', '@material-ui/pickers': '*', '@welldone-software/why-did-you-render': '*', }; const exposesComponents = { './App': './src/App', './LeftSideMenu': './src/components/LeftSideMenu', './RightSideMenu': './src/components/RightSideMenu', './ModalNotifications': './src/components/Notification/ModalNotifications', }; export default defineConfig({ publicDir: path.join(__dirname, 'public'), server: { host: 'localhost', port: 3003, }, build: { sourcemap: true, }, plugins: [ react(), banner2(() => `Ozey`), federation({ name: 'home', library: { type: 'var', name: 'home' }, filename: 'remoteEntry.js', exposes: exposesComponents, shared: sharedModules, }), ], });

[Adolph-WSY]

@Volene If possible, please provide a project to help us quickly locate whether the problem is from the configuration or something else.

[Volene]

Shared module cause this error but i dont know how to fix it

[zgid123]

I also faced this problem when testing shared packages for chakra-ui.

Here my demo repository: https://github.com/zgid123/vite-module-federation-demo.

Please uncomment those packages in vite.config.ts of monoApp folder

// '@emotion/react': '*',
// '@emotion/styled': '*',
// 'framer-motion': '*',

I don't know if sharing those packages can solve other problem or not, but when I tested antd, I can fix that problem

[zgid123]

I changed the code to skip add dep when the orderByDepCount[i] is undefined

      for (let i = 0; i < orderByDepCount.length; i++) {
        if (i === 0) {
          for (const key of orderByDepCount[i].keys()) {
            priority.push(key)
          }
        } else {
          for (const entries of orderByDepCount[i].entries()) {
            addDep(entries, priority, depInShared)
          }
        }
      }

I can build now but still receive the error

__federation_shared_react-dom.js:21 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at p (__federation_shared_react.js:12)
    at Object.o.useMemo (__federation_shared_react.js:12)
    at react.js:292
    at di (__federation_shared_react-dom.js:19)
    at es (__federation_shared_react-dom.js:19)
    at Ds (__federation_shared_react-dom.js:23)
    at zs (__federation_shared_react-dom.js:23)
    at kf (__federation_shared_react-dom.js:23)
    at Dt (__federation_shared_react-dom.js:23)
    at ji (__federation_shared_react-dom.js:21)

__federation_shared_react-dom.js:8 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at p (__federation_shared_react.js:12)
    at Object.o.useMemo (__federation_shared_react.js:12)
    at react.js:292
    at di (__federation_shared_react-dom.js:19)
    at es (__federation_shared_react-dom.js:19)
    at Ds (__federation_shared_react-dom.js:23)
    at zs (__federation_shared_react-dom.js:23)
    at kf (__federation_shared_react-dom.js:23)
    at Dt (__federation_shared_react-dom.js:23)
    at ji (__federation_shared_react-dom.js:21)

If you had faced this error before, please help me to fix this. Only occur with chakra-ui, I tested with antd, there is no problem. I am trying to fix this, but still no luck.

[nielsonlien]

hi @zgid123 , I have a problem with antd notification component (https://ant.design/components/notification/), this component works fine on my remote app on development mode, but when i build in production mode (host and mono app), it gives an error as below.

I suspect there is an import problem. Following is my vite config and package.json. Do i need to make my antd as shared dependencies? Appreciate, if you could let me know what is the problem. Thanks.

[zgid123]

@nielsonlien can you provide a sample project? Because I only tested antd to make sure if it worked. I don't use antd for my side project

[wkei]

@zgid123 here is a demo about antd/message/notification + vite-federation setup can reproduce the issue

https://stackblitz.com/edit/vitejs-vite-r6clfz?file=apps%2Fcontainer%2Fsrc%2FApp.tsx,README.md&terminal=dev

however, if we also use antd/message/notification in the host, antd/message/notification in remote app will also work

[zgid123]

I will have a look later, currently, I am having problem with chakra-ui and this package new version. Don't know the reason yet. I will help the author to have a look at your issue after I solved my issue