Is there a guide for how to use React Bridge for Webpack based Applications?

[qureshiather]

We are currently using Module Federation enhanced.

We use the build plugin in our webpack config, to consume and provide remote modules.
And then at runtime, we use the registerRemote and then the loadRemote, to load components.
We have an abstraction that we use where developers can pass the manifest url and the module name, and we load it using the above functions. This has been working for us.

However, I have been trying to use the Bridge Component documentation specified here and I have been running to issues
https://module-federation.io/practice/bridge/react-bridge.html

Our use case is that we want to upgrade remote applications to React 17 while the host app is on React 16.

The documentation is using rsbuild, but there is also this plugin, which I don't know what it is for.
https://www.npmjs.com/package/@module-federation/bridge-react-webpack-plugin, it has a ReactBridgeAliasChangerPlugin

And this guide:
https://alexocallaghan.com/upgrading-react-with-microfrontends

Has anyone successfully used Webpack and bridge together? I am very confused on what to do.

[qureshiather]

We are going to work backwards from this example:
https://github.com/module-federation/module-federation-examples/blob/master/runtime-plugins/multiple-react-versions/app1/webpack.config.js

[ScriptedAlchemy]

I wouldnt us that example since its pre-bridge solutions. You can look at the source of the rsbuild plugin. since under the hood its rspack which has same api as webpack. So if we add some kind of webpack plugin, then it would work with webpack directly as well, just dont use the rsbuild plugin. Check its source and see what its configuring

[qureshiather]

We got it working, posted answer below and closed the discussion. Thank you!

[qureshiather]

We got this working, sharing the solution here to give back.

This is our Host Application's Build Configuration:
"@module-federation/bridge-react": "0.11.1",
"@module-federation/enhanced": "0.11.1",
"@module-federation/retry-plugin": "^0.11.1",
"@module-federation/webpack-bundler-runtime": "0.11.1",

        new ModuleFederationPlugin({
            name: 'xXXXXXX',
            experiments: {
                asyncStartup: true,
            },
            shared: {
                react: {
                    import: 'react',
                    shareKey: 'react',
                    singleton: true,
                    requiredVersion: deps.react,
                },
                'react-dom': {
                    singleton: true,
                    requiredVersion: deps['react-dom'],
                },
                'react-router-dom': {
                    singleton: true,
                    requiredVersion: deps['react-router-dom'],
            },
            runtimePlugins: [require.resolve('./webpack.mf2-plugins.retry-plugin.ts')],
        }),

We also had add this line to our resolve configuration:

conditionNames: ['import', 'module', 'require'],
This was causing an issue for us when trying to import the bridge-react package. We think it's because it's of "type": "module".

Then at runtime to dynamically load components we use:
"@module-federation/bridge-react": "0.11.1",
"@module-federation/webpack-bundler-runtime": "0.11.1",

import federation from '@module-federation/webpack-bundler-runtime';
import { createRemoteComponent } from '@module-federation/bridge-react';

federation.runtime?.registerRemotes([{ name: scope, entry: mfManifestUrl }]);
const mod = await federation.runtime?.loadRemote(`${scope}/${module}`);
if (mod?.BRIDGE && mod?.default) {
    const RemoteApp = createRemoteComponent({
        loader: async () => mod,
        fallback: errorFallback,
        loading: LoadingState,
    });
    setRemoteComponent(() => lazy(() => Promise.resolve({ default: RemoteApp })));
} else {
    setRemoteComponent(() =>
        lazy(() => Promise.resolve(mod as { default: React.ComponentType<any> })),
    );
}

This is an example of a remote application, this file is exposed in the exposes config in a "producer" app. For this app, we also removed all shared singletons.

"@module-federation/bridge-react": "0.11.1",

import { createBridgeComponent } from '@module-federation/bridge-react';
import App from './App';

export default createBridgeComponent({
    rootComponent: App,
});

// Used to indicate that this is a bridge component and will be mounted with correct remote component adapter
export const BRIDGE = true;

We have other applications that are not updated to react 17, and they are working on the same host app. This functionality allows us to upgrade each app one by one. Our Host app is at react 16, other applications even on the same page use the shared singletons where as the React 17 app does not. We can also confirm this by looking at the Module Federation Dev Tool.

[ScriptedAlchemy]

You don't need bundler runtime. Using federation/runtime would do. Bubdler runtime is usually what interfaces in compile plugin. So you can use the runtime package instead.