feat: add option reactRefreshPrefix for HMR module federation

Author: protoEvangelion

packages/common/refresh-utils.ts

@@ -19,6 +19,7 @@ export function addRefreshWrapper<M extends { mappings: string } | undefined>(
   map: M | string,
   pluginName: string,
   id: string,
+  reactRefreshHost?: string
 ): { code: string; map: M | string } {
   const hasRefresh = refreshContentRE.test(code)
   const onlyReactComp = !hasRefresh && reactCompRE.test(code)
@@ -55,7 +56,7 @@ if (import.meta.hot && !inWebWorker) {
     }
   }
 
-  newCode = `import * as RefreshRuntime from "${runtimePublicPath}";
+  newCode = `import * as RefreshRuntime from "${reactRefreshHost ?? ''}${runtimePublicPath}";
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 
 ${newCode}

packages/plugin-react/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 ## Unreleased
 
+### Add option `reactRefreshHost`
+
+Add option `reactRefreshHost` to set React refresh runtime url prefix.
+This is useful in module federation context to enable HMR by setting the host url on a vite config which is serving a remote app.
+See full discussion here: https://github.com/module-federation/vite/issues/183#issuecomment-2751825367
+
+```ts
+export default defineConfig({
+  plugins: [react({ reactRefreshHost: 'http://localhost:3000' })],
+})
+```
+
 ## 4.3.4 (2024-11-26)
 
 ### Add Vite 6 to peerDependencies range

packages/plugin-react/README.md

@@ -94,6 +94,16 @@ This option does not enable _code transformation_. That is handled by esbuild.
 
 Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/babel-parser#ecmascript-proposalshttpsgithubcombabelproposals).
 
+### reactRefreshHost
+
+The `reactRefreshHost` option is only necessary in a module federation context. It allows HMR to work between a remote & host server. In your remote vite config you would add your host origin:
+
+```js
+react({ reactRefreshHost: 'http://localhost:3000' })
+```
+
+Under the hood this simply updates the react refresh url from "/@react-refresh" to "http://localhost:3000/@react-refresh" allowing HMR updates to flow from your remote to your host.
+
 ## Middleware mode
 
 In [middleware mode](https://vite.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:

packages/plugin-react/src/index.ts

@@ -44,6 +44,14 @@ export interface Options {
   babel?:
     | BabelOptions
     | ((id: string, options: { ssr?: boolean }) => BabelOptions)
+  /**
+   * React refresh runtime url prefix.
+   * Useful in module federation context to enable HMR by
+   * setting the host url on a vite config which is serving a remote app.
+   * @example
+   * reactRefreshHost: 'http://localhost:3000'
+   */
+  reactRefreshHost?: string
 }
 
 export type BabelOptions = Omit<
@@ -258,6 +266,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           result.map ?? undefined,
           '@vitejs/plugin-react',
           id,
+          opts.reactRefreshHost
         )
       }
     },