core: TypeError: Cannot read properties of undefined (reading '_config')

Describe the bug

What we are trying to achieve

I work for a company and we have multiple Next apps that will be consuming shared components from one Next application using Module Federation plugin. We also have multiple deployment environments so we need to make use of dynamic remote URLs.

The issue

The issue we’re seeing is that we keep seeing:

⨯ node_modules/@module-federation/utilities/dist/index.cjs.js (100:0) @ loadScript
⨯ TypeError: Cannot read properties of undefined (reading '_config')
   at loadScript (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:100:24)
   at eval (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:413:30)
   at step (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:358:23)
   at Object.eval [as next] (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:299:20)
   at asyncGeneratorStep$2 (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:215:28)
   at _next (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:233:17)
   at eval (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:238:13)
   at new Promise (<anonymous>)
   at eval (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:230:16)
   at injectScript (webpack-internal:///./node_modules/@module-federation/utilities/dist/index.cjs.js:421:21)
   at eval (webpack-internal:///./src/pages/index.js:21:100)
   at ./src/pages/index.js (/Users/user-name/work/nextmf-styled-issue/host/.next/server/pages/index.js:325:1)
   at __webpack_require__ (/Users/user-name/work/nextmf-styled-issue/host/.next/server/webpack-runtime.js:278:33)
   at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Findex.js&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:22:77)
   at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES&page=%2F&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Findex.js&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/Users/user-name/work/nextmf-styled-issue/host/.next/server/pages/index.js:138:1) {
 page: '/'

We’re using injectScript to load the remote container at runtime. I’ve created a very simple repo that shows the issue we’re seeing.

Reproduction

https://github.com/muhanad40/mf-issue

Used Package Manager

npm

System Info

System:
    OS: macOS 14.4
    CPU: (12) arm64 Apple M2 Pro
    Memory: 763.23 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 122.0.6261.112
    Edge: 122.0.2365.80
    Safari: 17.4

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.