Weboack 5 Module Federation error in shared

Bug report

What is the current behavior?

webpack version: 5.37.0 react version: 17.0.2 react-dom version: 17.0.2

i created project for demostation my problem -> module_federation_test

I have two apps:

1. host_app is app which render remote app on different port. it works on localhost:8080
2. remote_app is app which rende only - hello world, good luck. it works on localhost:8081

And my projec didn’t work.

when i didn’t use shared i had error:

- Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
-   1. You might have mismatching versions of React and the renderer (such as React DOM)
-   2. You might be breaking the Rules of Hooks
-   3. You might have more than one copy of React in the same app
- ....... etc

when i used shared i had error:

- Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react
-    at Object.__webpack_require__.m.<computed> (consumes:132)
-    at __webpack_require__ (bootstrap:24)
- ....... etc

in second option i used this config

for host_app

new ModuleFederationPlugin({
      name: "host",
      filename: 'static/js/remoteEntry.js',
      remotes: {
        remote_app: "remote_app@http://localhost:8081/static/js/remoteEntry.js",
      },
      shared: [
        {
          react: {
            singleton: true,
            eager: true,
            requiredVersion: deps.react
          },
          "react-dom": {
            singleton: true,
            eager: true,
            requiredVersion: deps["react-dom"]
          }
        }
      ]
    })

for remote_app

new  ModuleFederationPlugin({
      name: 'remote_app',
      library: { type: "var", name: 'remote_app' },
      filename: 'static/js/remoteEntry.js',
      exposes: {
        "./RootApp": "./src/apps/RemoteApp",
      },
      shared: [
        {
          react: {
            singleton: true,
            eager: true,
            requiredVersion: deps.react
          },
          "react-dom": {
            singleton: true,
            eager: true,
            requiredVersion: deps["react-dom"]
          }
        }
      ]
    })

I found infomation about eager react on react_eager, but it isn’t work

I need help. Maybe i don’t understand philosophy or other things which are important for solve my problem.

p.s I tried lots of option, but it didn’t work. I made test project on GitHub (link above in the problem description) when anyone can test their theory of the truthful version code.

Please don’t tell me that it is problem in react =)

[XiaofengXie16]

@MaxusAdmin No problem, I am glad I can help.

[XiaofengXie16]

Could you try remove the then statement? Also , if I run the code below does it work for you (it is modified based on the code you provided)? https://github.com/XiaofengXie16/module_federation_test @MaxusAdmin