From 438cb1be026477f4b5c0bdd7a94f3ba86b2a8a3d Mon Sep 17 00:00:00 2001
From: Pedro Cattori <pcattori@gmail.com>
Date: Wed, 26 Apr 2023 18:06:23 -0400
Subject: [PATCH] fix(react,dev): dev chunking and refresh race condition
 (#6201)

---
 .changeset/dry-buses-care.md                  |  6 ++++
 packages/remix-dev/compiler/js/compiler.ts    | 33 ++++++++++---------
 .../remix-dev/config/defaults/entry.dev.ts    | 13 ++++++++
 packages/remix-react/browser.tsx              |  2 +-
 4 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/dry-buses-care.md
 create mode 100644 packages/remix-dev/config/defaults/entry.dev.ts

diff --git a/.changeset/dry-buses-care.md b/.changeset/dry-buses-care.md
new file mode 100644
index 00000000000..0ef9cc257e4
--- /dev/null
+++ b/.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
diff --git a/packages/remix-dev/compiler/js/compiler.ts b/packages/remix-dev/compiler/js/compiler.ts
index bb77e352222..e2bed448f27 100644
--- a/packages/remix-dev/compiler/js/compiler.ts
+++ b/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));
   }
diff --git a/packages/remix-dev/config/defaults/entry.dev.ts b/packages/remix-dev/config/defaults/entry.dev.ts
new file mode 100644
index 00000000000..036c6c04a9f
--- /dev/null
+++ b/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");
+};
diff --git a/packages/remix-react/browser.tsx b/packages/remix-react/browser.tsx
index 1ad587f8cc0..4453d171d58 100644
--- a/packages/remix-react/browser.tsx
+++ b/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();