From b526aee88ac8051c50d73386fbef43670849cc12 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Fri, 12 Aug 2022 10:33:45 -0700
Subject: [PATCH] feat(remix-react): unblock hydration via async module scripts
 (#3918)

* feat: unblock hydration via async module scripts

* flatten manifest into async module script
---
 .changeset/wild-meals-beg.md        |  5 +++++
 packages/remix-react/components.tsx | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 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 a759b2e689d..4ff6963c085 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -807,14 +807,17 @@ 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
           )};`
       )
       .join("\n")}
 window.__remixRouteModules = {${matches
       .map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`)
-      .join(",")}};`;
+      .join(",")}};
+      
+import(${JSON.stringify(manifest.entry.module)});`;
 
     return (
       <>
@@ -822,14 +825,14 @@ window.__remixRouteModules = {${matches
           {...props}
           suppressHydrationWarning
           dangerouslySetInnerHTML={createHtml(contextScript)}
+          type={undefined}
         />
-        <script {...props} 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
@@ -862,6 +865,11 @@ window.__remixRouteModules = {${matches
 
   return (
     <>
+      <link
+        rel="modulepreload"
+        href={manifest.entry.module}
+        crossOrigin={props.crossOrigin}
+      />
       {dedupe(preloads).map((path) => (
         <link
           key={path}