[Module Federation] remote modules fail to load shared dependency

[foxylion]

Hi!
I tried to create an example application using module federation. I used the example from advanced-api/dynamic-remotes as a basis for my implementation.

Everything worked fine until I added the shared configuration. (When I remove that part from the webpack configuration the application works like expected. With the shared configuration it fails to load the remote modules with the following error:

Uncaught TypeError: Cannot read property 'react' of undefined
    at register (micro-frontend.nocache.js:formatted:404)
    at Function.__webpack_require__.I (micro-frontend.nocache.js:formatted:452)
    at Object.init (container_entry:24)
    at RemoteComponent.tsx:15

My shared configuration looks like the following:

shared: {
  react: {
    requiredVersion: appDependencies.react,
    import: "react",
    shareKey: "react",
    shareScope: "default",
    singleton: true,
  },
},

I uploaded my current minimal application to GitHub. Maybe someone can help me spot the issue? I'm somewhat lost.

https://github.com/foxylion/micro-frontends/tree/d804ffc9f48fdd249fbb41327e3882e19f2f423c

Steps to reproduce the problem:

# Start root frontend
cd frontends/root && npm install && npm start

# Start product frontend (another console)
cd frontends/product && npm install && npm start

Open http://localhost:5000/ in a browser and click on "Load Product Details". Console will show the error.

I can see from the network tab that my application only loads micro-frontend.nocache.js (custom naming for remoteEntry.js). The example will follow with requests for the react-dependency and the to be imported module itself. This will not happen for my application at it already fails within code inside the micro-frontend.nocache.js.

Thank you for any tips and help!
Jakob

[foxylion]

Okay, I think I found the problem.

I called container.init without passing the default share scope. This broke everything. :-)