When configuring remote as an application in react production environment, HMR fails.

[handsomepear]

Like this in the host application:

export const federationConfig: ModuleFederationOptions = {
  name: 'host-app',
  filename: 'remoteEntry.js',
  remotes: {
    // Not a real domain name, just an example
    'remote-react-app1': 'remote-react-app1@https://somehost.com/remoteEntry.js',
    'remote-react-app2': 'remote-react-app2@https://somehost.com/remoteEntry.js',
    // ...some remote react apps
  },
  shared: {
    ...dependencies,
    react: {
      singleton: true,
      requiredVersion: dependencies['react'],
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
}

When developing in a local environment, HMR fails. This may be because the shared react is a production product. How can I solve this problem and make HMR available? I am using rsbuild.

[yuvalkarif]

Hi, @handsomepear. I've encountered a similar issue with vue, the host react instance probably has to be run in dev mode (in vue running in NODE_ENV=development has made the trick), as those frameworks strip their HMR internals on production builds.

This is not recommended for your production app, but may be useful as a preprod app.

[handsomepear]

Hi, @yuvalkarif. Thanks for your suggestion. Using react-development for packaging is a good solution, but for me, controlling shared dependencies and loading local react-development in host development mode may be the best way.

The above is translated by Google. Please forgive me if it is offensive.