fix: handle reactRefreshHost

Author: hi-ogawa

packages/common/refresh-utils.ts

@@ -64,12 +64,15 @@ function $RefreshSig$() { return RefreshRuntime.createSignatureFunctionForTransf
   return newCode
 }
 
-export function virtualPreamblePlugin({
-  isEnabled,
-}: {
+export function virtualPreamblePlugin(opts: {
   isEnabled: () => boolean
+  reactRefreshHost?: string
 }): Plugin {
   const VIRTUAL_NAME = 'virtual:@vitejs/plugin-react/preamble'
+  let importSource = VIRTUAL_NAME
+  if (opts.reactRefreshHost) {
+    importSource = opts.reactRefreshHost + '/@id/__x00__' + VIRTUAL_NAME
+  }
   return {
     name: 'vite:react-virtual-preamble',
     apply: 'serve',
@@ -86,7 +89,7 @@ export function virtualPreamblePlugin({
       filter: { id: exactRegex('\0' + VIRTUAL_NAME) },
       handler(id) {
         if (id === '\0' + VIRTUAL_NAME) {
-          if (isEnabled()) {
+          if (opts.isEnabled()) {
             // vite dev import analysis can rewrite base
             return preambleCode.replace('__BASE__', '/')
           }
@@ -102,8 +105,11 @@ export function virtualPreamblePlugin({
 
         // this is expected to match `react`, `react-dom`, and `react-dom/client`.
         // they are all optimized to be esm during dev.
-        if (isEnabled() && code.includes('__REACT_DEVTOOLS_GLOBAL_HOOK__')) {
-          return `import ${JSON.stringify(VIRTUAL_NAME)};` + code
+        if (
+          opts.isEnabled() &&
+          code.includes('__REACT_DEVTOOLS_GLOBAL_HOOK__')
+        ) {
+          return `import ${JSON.stringify(importSource)};` + code
         }
       },
     },

packages/plugin-react/src/index.ts

@@ -527,6 +527,7 @@ export default function viteReact(opts: Options = {}): Plugin[] {
     viteReactRefresh,
     virtualPreamblePlugin({
       isEnabled: () => !skipFastRefresh && !isFullBundle,
+      reactRefreshHost: opts.reactRefreshHost,
     }),
   ]
 }

playground/react/vite.config.ts

@@ -4,7 +4,11 @@ import type { UserConfig } from 'vite'
 const config: UserConfig = {
   server: { port: 8902 /* Should be unique */ },
   mode: 'development',
-  plugins: [react()],
+  plugins: [
+    react({
+      reactRefreshHost: 'http://localhost:8902',
+    }),
+  ],
   build: {
     // to make tests faster
     minify: false,