feat: add option reactRefreshPrefix for HMR module federation

Author: i

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://vitejs.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/fast-refresh.ts

@@ -1,6 +1,7 @@
 import fs from 'node:fs'
 import path from 'node:path'
 import { createRequire } from 'node:module'
+import { type Options } from './index'
 
 export const runtimePublicPath = '/@react-refresh'
 
@@ -28,8 +29,9 @@ window.$RefreshSig$ = () => (type) => type
 window.__vite_plugin_react_preamble_installed__ = true
 `
 
-const sharedHeader = `
-import RefreshRuntime from "${runtimePublicPath}";
+const sharedHeader = (reactRefreshHost: Options['reactRefreshHost']) =>
+  `
+import RefreshRuntime from "${reactRefreshHost ?? ''}${runtimePublicPath}";
 
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 `.replace(/\n+/g, '')
@@ -74,9 +76,13 @@ if (import.meta.hot && !inWebWorker) {
   });
 }`
 
-export function addRefreshWrapper(code: string, id: string): string {
+export function addRefreshWrapper(
+  code: string,
+  id: string,
+  opts: Options,
+): string {
   return (
-    sharedHeader +
+    sharedHeader(opts.reactRefreshHost) +
     functionHeader.replace('__SOURCE__', JSON.stringify(id)) +
     code +
     functionFooter +
@@ -87,6 +93,7 @@ export function addRefreshWrapper(code: string, id: string): string {
 export function addClassComponentRefreshWrapper(
   code: string,
   id: string,
+  opts: Options,
 ): string {
-  return sharedHeader + code + sharedFooter(id)
+  return sharedHeader(opts.reactRefreshHost) + code + sharedFooter(id)
 }

packages/plugin-react/src/index.ts

@@ -47,6 +47,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<
@@ -261,9 +269,9 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         let code = result.code!
         if (useFastRefresh) {
           if (refreshContentRE.test(code)) {
-            code = addRefreshWrapper(code, id)
+            code = addRefreshWrapper(code, id, opts)
           } else if (reactCompRE.test(code)) {
-            code = addClassComponentRefreshWrapper(code, id)
+            code = addClassComponentRefreshWrapper(code, id, opts)
           }
         }
         return { code, map: result.map }