Nested and circular Module Federation bundles

Question

I am running into what I think is multiple React modules initialize due to nested and circular federated modules. Wondering how to get around that, or is not not possible to have such scenario ?

I have 2 apps. App1 is the host app, but it also exposes Component1 , which is used in App2. The tree (overly simplified) looks like this: App1 -> loads MF bundle dynamically from App2 which in turn loads Component1 from MF bundle in App1

When my Component1 gets loaded, I see an error pointing to a potential duplicate React package on the page. Error looks like below, and I ruled out the options 1 and 2 from React's error message:

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**
See fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at Object.throwInvalidHookError (VM13722 react-dom.development.js:16158)
    at useEffect (VM13714 react.development.js:1631)

I have tested a simpler setup where App2 runs independently and loads Component1 from App1, that works no problem.

App1's webpack config has this setting:

new webpack.container.ModuleFederationPlugin({
            name: 'HostApp',
            filename: `federatedEntry.js`,
            exposes: {
                Component1: './path/to/my/component',
            },
            remotes: {},
            shared: {
                react: {
                    singleton: true,
                    requiredVersion: deps.react,
                },
                'react-dom': {
                    singleton: true,
                    requiredVersion: deps['react-dom'],
                },
                'react-router-dom': {
                    singleton: true,
                    requiredVersion: deps['react-router-dom'],
                },
            },
        })

App2 webpack config looks similar:

new ModuleFederationPlugin({
            name: RemoteAppShell,
            filename: remoteEntry.js,
            exposes: {
                Shell: './core/App',
            },
            shared: {
                react: {
                    import: 'react',
                    shareKey: 'react',
                    shareScope: 'default',
                    singleton: true,
                },
                'react-dom': {
                    singleton: true,
                },
                'react-router-dom': {
                    singleton: true,
                },
            },
        })

Nested and circular Module Federation bundles

0 Answers