remote component error in react when this version different

[mrcwl]

Describe the bug

host: react v18.3.1 remote: react v18.2.0 It seems that MF cannot find the react

host config

export default defineConfig({
  plugins: [pluginReact()],
  tools: {
    rspack: (config, { appendPlugins }) => {
      config.output.publicPath = 'auto'
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'host',
          remotes: {
            remote: `remote@http://localhost:3101/remoteEntry.js`,
          },
          dev: {
            disableHotTypesReload: true,
            disableDynamicRemoteTypeHints: true
          },
          shared: {
            react: {
              singleton: false,
              requiredVersion: '18.3.1',
            },
            'react-dom': {
              singleton: false,
              requiredVersion: '18.3.1',
            }
          }
        }),
      ]);
    },
  },
})

remote config

export default defineConfig({
  plugins: [pluginReact()],
  server: {
    port: 3101
  },
  tools: {
    rspack: (config, { appendPlugins }) => {
      config.output.publicPath = 'auto'
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'remote',
          filename: 'remoteEntry.js',
          exposes: {
            './Test': './src/Test',
          },
          shared: {
            react: {
              singleton: false,
              requiredVersion: '18.2.0',
            },
            'react-dom': {
              singleton: false,
              requiredVersion: '18.2.0',
            }
          }
        }),
      ]);
    },
  },
});

The above error occurred in the <Test> component:
    at Test (http://localhost:3101/static/js/async/__federation_expose_Test.js:14:53)
    at div
    at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18701
update.callback @ react-dom.development.js:18734
callCallback @ react-dom.development.js:15033
commitUpdateQueue @ react-dom.development.js:15054
commitLayoutEffectOnFiber @ react-dom.development.js:23427
commitLayoutMountEffects_complete @ react-dom.development.js:24724
commitLayoutEffects_begin @ react-dom.development.js:24710
commitLayoutEffects @ react-dom.development.js:24648
commitRootImpl @ react-dom.development.js:26859
commitRoot @ react-dom.development.js:26718
finishConcurrentRender @ react-dom.development.js:25928
performConcurrentWorkOnRoot @ react-dom.development.js:25845
workLoop @ scheduler.development.js:254
flushWork @ scheduler.development.js:227
performWorkUntilDeadline @ scheduler.development.js:521

react-dom.development.js:26959  Uncaught TypeError: Cannot read properties of null (reading 'useEffect')
    at useEffect (react.development.js:1627:1)
    at Test (Test.tsx:4:1)
    at renderWithHooks (react-dom.development.js:15483:1)
    at mountIndeterminateComponent (react-dom.development.js:20100:1)
    at beginWork (react-dom.development.js:21623:1)
    at beginWork$1 (react-dom.development.js:27462:1)
    at performUnitOfWork (react-dom.development.js:26593:1)
    at workLoopSync (react-dom.development.js:26502:1)
    at renderRootSync (react-dom.development.js:26470:1)
    at recoverFromConcurrentError (react-dom.development.js:25886:1)

Reproduction

https://github.com/mrcwl/mf-error-test

Used Package Manager

pnpm

System Info

System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.81 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - /usr/local/bin/npm
    pnpm: 8.15.4 - /usr/local/bin/pnpm
  Browsers:
    Chrome: 125.0.6422.142
    Safari: 17.5

Validations

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

[elliotwestlake]

I'm also seeing the same issue, although they all have the same version :(

Here is my reproduction: https://github.com/elliotwestlake/rsbuild-react-issue

You can reproduce by following these steps:

1. pnpm dev
2. Make a change in one of the apps
3. Refresh page

[mrcwl]

I'm also seeing the same issue, although they all have the same version :(

Here is my reproduction: https://github.com/elliotwestlake/rsbuild-react-issue

You can reproduce by following these steps:

1. pnpm dev
2. Make a change in one of the apps
3. Refresh page

Yes, when I set the host and remote react version to 18.3.1, I modify the component code in the host and refresh the page, and the same error occurs.

[ScriptedAlchemy]

set it as a singleton, otherwise it will use strict version.

you can also look at my cra example on mf-examples, you can set in rsbuild react plugin ({splitting: {router: false, react: false})

[mrcwl]

set it as a singleton, otherwise it will use strict version.

you can also look at my cra example on mf-examples, you can set in rsbuild react plugin ({splitting: {router: false, react: false})

i find the same issues in your cra example when i update @rsbuild/core and @rsbuild/plugin-react to version 0.7.8.

i don't understand what static version means and how can i use different versions of react in my host and remote?

[ScriptedAlchemy]

React is a singleton, only one can be loaded at runtime.

If you want multiple versions of react then you will need to mount them as apps on divs, not use them as JSX.