react refresh runtime was loaded twice when trying to use @module-federation/bridge-react

[DanielSegal1]

hi. I'm currently trying to build a vite host + remote with this plugin and @module-federation/bridge-react, so I can load a react 17 remote component into a react 18 host. unfortunately I get the following error:

Uncaught Error: React refresh runtime was loaded twice. Maybe you forgot the base path?

the vite.config of the remote is:

defineConfig({
    plugins: [
        react(),
        federation({
            name: 'vite_guest_app',
            filename: 'remoteEntry.js',
            exposes: {
                './Button': './src/button/index.jsx'
            },
            // shared: ['react', 'react-dom']
        })
    ],
    build: {
        modulePreload: false,
        target: 'esnext',
        minify: false,
        cssCodeSplit: false
      }
})

and the one of the host is:

defineConfig({
    plugins: [
        react(),
        federation({
            name: 'host',
            remotes: {
                vite_guest_app: {
                    name: 'vite_guest_app',
                    type: 'module',
                    entry: 'http://localhost:5174/remoteEntry.js',

                },
                // webpack_guest_app: {
                //     external: 'http://localhost:8080/dist/remoteEntry.js',
                //     externalType: 'url',
                //     format: 'var',
                //     from: 'webpack'
                // }
            }
        })
    ],
    build: {
        modulePreload: false,
        target: 'chrome89',
        minify: false,
        cssCodeSplit: false
    }
})

the way I expose and consume the component is via @module-federation/bridge-react, and it looks like the following: expose (at remote):

import { createBridgeComponent } from '@module-federation/bridge-react';
...
export default createBridgeComponent({
    rootComponent: Button
});

consume (at host):

import { loadRemote } from '@module-federation/enhanced/runtime'
import { createRemoteComponent } from '@module-federation/bridge-react';
...
const ConsumedButton = createRemoteComponent({
    loader: () => loadRemote('vite_guest_app/Button'),
    fallback: () => <div>error</div>,
    loading: <div>loading</div>,
});
...
<ConsumedButton />

any idea if I'm doing something wrong or if this plugin does not yet supports what I'm trying to achieve?

[gioboa]

Hi, thanks for the feedback, can you create a basic example to clone please? In this way we will tackle the problem easily

[DanielSegal1]

uploaded the repo to dynamic-module-federation you need to install node modules inside each of host and vite-guest dirs, run (inside vite-guest): npm run build, npm run serve run (inside host): npm run dev

[gioboa]

I'm looking at this issue and I have a different error though. I'm looking for a webpack bridge-react project to clone :eyes: and migrate to Vite.

[DanielSegal1]

what error are you getting?

[gioboa]

the remote has the right name though. So I looking forward to migrating a working webpack bridge-react project, but I can't find ones. Can you help me with that?

[DanielSegal1]

I pushed a change to my repo in which I use import('vite_guest_app/Button') instead of loadRemote('vite_guest_app/Button') and it seems to go back into the error which I described first. Right now Im not so sure anymore that react-bridge is what I need. maybe you can advise something else for my use case (unrelated to this issue that may needs a solution anyway). My use case is I want to load react version X component in a host with react version Y. thanks

[nguyenbatranvan]

problem when using with vite-plugin-react-swc