Multiple instances of singleton shared dependencies are fetched and ran in runtime - "Cannot read properties of null (reading 'useEffect')" #3170
Description
Describe the bug
When a host app imports a remote directly without lazy loading, in certain scenarios the shared singleton dependencies (in our case React) get downloaded for both the host and the remote, they can end up each using their own respective versions of that shared dependency.
After some investigation, we think the issue happens when the remote entry files finishes downloading before the host dependencies - see the example below, the host depends on react 18.2.0, the remote on react 18.3.1.
In cases where the react 18.2.0 chunk ends up finishing loading first, we do not see this issue:
Reproduction steps:
run pnpm i
run pnpm --filter=host dev
run pnpm --filter=remote dev
Expected: page loads correctly
Actual: page fails to load due to incorrect request for the deps of remote app.
The example config is (using the latest versions from @rsbuild/core, @rsbuild/plugin-react and @module-federation/rsbuild-plugin):
Host
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
export default defineConfig({
server: {
port: 3000,
},
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'host',
remotes: {
remote: 'remote@http://localhost:3001/foo/remoteEntry.js',
},
shared: {
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
dts: false,
shareStrategy: 'loaded-first',
}),
],
});Remote
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
export default defineConfig({
server: {
base: '/foo',
port: 3001,
},
plugins: [
pluginReact(),
pluginModuleFederation({
name: 'remote',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button',
},
shared: {
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
dts: false,
shareStrategy: 'loaded-first',
}),
],
});Reproduction
https://github.com/danhorvath/rsbuild-demo
Used Package Manager
pnpm
System Info
System:
OS: macOS 15.1
CPU: (12) arm64 Apple M3 Pro
Memory: 1.42 GB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
pnpm: 9.12.3 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
Browsers:
Chrome: 130.0.6723.92
Edge: 130.0.2849.56
Safari: 18.1Validations
- 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.