fix(react,dev): dev chunking and refresh race condition (#6201)

.changeset/dry-buses-care.md

@@ -0,0 +1,6 @@
+---
+"@remix-run/dev": patch
+"@remix-run/react": patch
+---
+
+fix(react,dev): dev chunking and refresh race condition

packages/remix-dev/compiler/js/compiler.ts

@@ -104,6 +104,23 @@ const createEsbuildConfig = (
     }
   }
 
+  if (
+    ctx.options.mode === "development" &&
+    ctx.config.future.unstable_dev !== false
+  ) {
+    let defaultsDirectory = path.resolve(
+      __dirname,
+      "..",
+      "..",
+      "config",
+      "defaults"
+    );
+    entryPoints["__remix_entry_dev"] = path.join(
+      defaultsDirectory,
+      "entry.dev.ts"
+    );
+  }
+
   let matchPath = ctx.config.tsconfigPath
     ? createMatchPath(ctx.config.tsconfigPath)
     : undefined;
@@ -175,22 +192,6 @@ const createEsbuildConfig = (
   ];
 
   if (ctx.options.mode === "development" && ctx.config.future.unstable_dev) {
-    // TODO prebundle deps instead of chunking just these ones
-    let isolateChunks = [
-      require.resolve("react"),
-      require.resolve("react/jsx-dev-runtime"),
-      require.resolve("react/jsx-runtime"),
-      require.resolve("react-dom"),
-      require.resolve("react-dom/client"),
-      require.resolve("react-refresh/runtime"),
-      require.resolve("@remix-run/react"),
-      "remix:hmr",
-    ];
-    entryPoints = {
-      ...entryPoints,
-      ...Object.fromEntries(isolateChunks.map((imprt) => [imprt, imprt])),
-    };
-
     plugins.push(hmrPlugin(ctx));
     plugins.push(cssBundleUpdatePlugin(channels));
   }

packages/remix-dev/config/defaults/entry.dev.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/* eslint-disable */
+
+export default () => {
+  import("react");
+  import("react/jsx-dev-runtime");
+  import("react/jsx-runtime");
+  import("react-dom");
+  import("react-dom/client");
+  import("react-refresh/runtime");
+  import("@remix-run/react");
+  import("remix:hmr");
+};

packages/remix-react/browser.tsx

@@ -136,7 +136,7 @@ if (import.meta && import.meta.hot) {
           setTimeout(() => {
             Object.assign(window.__remixManifest, assetsManifest);
             window.$RefreshRuntime$.performReactRefresh();
-          }, 0);
+          }, 1);
         }
       });
       router.revalidate();