From 984f45460feb3f757433243140f7f999d1707a5f Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Wed, 3 Aug 2022 14:15:50 -0700
Subject: [PATCH 1/2] feat: unblock hydration via async module scripts

---
 .changeset/wild-meals-beg.md        |  5 +++++
 packages/remix-react/components.tsx | 14 +++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/wild-meals-beg.md

diff --git a/.changeset/wild-meals-beg.md b/.changeset/wild-meals-beg.md
new file mode 100644
index 00000000000..241e4aad984
--- /dev/null
+++ b/.changeset/wild-meals-beg.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+Unblock hydration via use of async module scripts.
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 3a6bef315da..72700735a4d 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -803,7 +803,9 @@ export function Scripts(props: ScriptProps) {
       .join("\n")}
 window.__remixRouteModules = {${matches
       .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
-      .join(",")}};`;
+      .join(",")}};
+      
+import(${JSON.stringify(manifest.entry.module)});`;
 
     return (
       <>
@@ -811,14 +813,15 @@ window.__remixRouteModules = {${matches
           {...props}
           suppressHydrationWarning
           dangerouslySetInnerHTML={createHtml(contextScript)}
+          type={undefined}
         />
-        <script {...props} src={manifest.url} />
+        <script {...props} type={undefined} src={manifest.url} />
         <script
           {...props}
           dangerouslySetInnerHTML={createHtml(routeModulesScript)}
           type="module"
+          async
         />
-        <script {...props} src={manifest.entry.module} type="module" />
       </>
     );
     // disabled deps array because we are purposefully only rendering this once
@@ -851,6 +854,11 @@ window.__remixRouteModules = {${matches
 
   return (
     <>
+      <link
+        rel="modulepreload"
+        href={manifest.entry.module}
+        crossOrigin={props.crossOrigin}
+      />
       {dedupe(preloads).map((path) => (
         <link
           key={path}

From fac8b2788555e1b292ee437b6180326ff3b2bf6e Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Mon, 8 Aug 2022 13:34:56 -0700
Subject: [PATCH 2/2] flatten manifest into async module script

---
 packages/remix-react/components.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 72700735a4d..778196d045b 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -796,7 +796,8 @@ export function Scripts(props: ScriptProps) {
     let routeModulesScript = `${matches
       .map(
         (match, index) =>
-          `import * as route${index} from ${JSON.stringify(
+          `import ${JSON.stringify(manifest.url)};
+import * as route${index} from ${JSON.stringify(
             manifest.routes[match.route.id].module
           )};`
       )
@@ -815,7 +816,6 @@ import(${JSON.stringify(manifest.entry.module)});`;
           dangerouslySetInnerHTML={createHtml(contextScript)}
           type={undefined}
         />
-        <script {...props} type={undefined} src={manifest.url} />
         <script
           {...props}
           dangerouslySetInnerHTML={createHtml(routeModulesScript)}