From cab12abafd9fd96de0b921fcbb8033d74afe0716 Mon Sep 17 00:00:00 2001
From: Jacob Ebey <jacob.ebey@live.com>
Date: Tue, 21 Feb 2023 14:47:35 -0800
Subject: [PATCH] fix: remove duplicate manifest imports introduced by defer
 work test: add test to assert generated scripts

---
 .changeset/new-bulldogs-allow.md    |  5 +++++
 integration/link-test.ts            | 29 +++++++++++++++++++++++++++++
 packages/remix-react/components.tsx |  6 +++---
 3 files changed, 37 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/new-bulldogs-allow.md

diff --git a/.changeset/new-bulldogs-allow.md b/.changeset/new-bulldogs-allow.md
new file mode 100644
index 00000000000..e93fcb53670
--- /dev/null
+++ b/.changeset/new-bulldogs-allow.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/react": patch
+---
+
+remove duplicate manifest imports
diff --git a/integration/link-test.ts b/integration/link-test.ts
index e70a1c0c936..2c37871c888 100644
--- a/integration/link-test.ts
+++ b/integration/link-test.ts
@@ -530,4 +530,33 @@ test.describe("route module link export", () => {
       expect(await locator.getAttribute("imagesizes")).toBe("100vw");
     });
   });
+
+  test.describe("script imports", () => {
+    test("are added to the document", async ({ page }) => {
+      let app = new PlaywrightFixture(appFixture, page);
+      await app.goto("/");
+      let scripts = await page.$$("script");
+      expect(scripts.length).toEqual(2);
+      expect(await scripts[0].innerText()).toContain("__remixContext");
+      let moduleScript = scripts[1];
+      expect(await moduleScript.getAttribute("type")).toBe("module");
+      let moduleScriptText = await moduleScript.innerText();
+      expect(
+        Array.from(moduleScriptText.matchAll(/import "\/build\/manifest-/g)),
+        "invalid build manifest"
+      ).toHaveLength(1);
+      expect(
+        Array.from(moduleScriptText.matchAll(/import \* as route0 from "/g)),
+        "invalid route0"
+      ).toHaveLength(1);
+      expect(
+        Array.from(moduleScriptText.matchAll(/import \* as route1 from "/g)),
+        "invalid route1"
+      ).toHaveLength(1);
+      expect(
+        Array.from(moduleScriptText.matchAll(/import \* as route2 from "/g)),
+        "too many routes"
+      ).toHaveLength(0);
+    });
+  });
 });
diff --git a/packages/remix-react/components.tsx b/packages/remix-react/components.tsx
index 272119db822..0161a71279c 100644
--- a/packages/remix-react/components.tsx
+++ b/packages/remix-react/components.tsx
@@ -904,11 +904,11 @@ export function Scripts(props: ScriptProps) {
 
     let routeModulesScript = !isStatic
       ? " "
-      : `${matches
+      : `import ${JSON.stringify(manifest.url)};
+        ${matches
           .map(
             (match, index) =>
-              `import ${JSON.stringify(manifest.url)};
-import * as route${index} from ${JSON.stringify(
+              `import * as route${index} from ${JSON.stringify(
                 manifest.routes[match.route.id].module
               )};`
           )