From d996d7e350aa0663f3583157542dfb04e84fedd3 Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.singer@ligo.org>
Date: Tue, 11 Jul 2023 17:06:28 -0400
Subject: [PATCH 1/3] fix(dev): treat imported assets from node_modules as
 external

Fixes #1909.
---
 integration/svg-in-node-modules-test.ts       | 51 +++++++++++++++++++
 .../compiler/server/plugins/bareImports.ts    | 20 +++++++-
 2 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 integration/svg-in-node-modules-test.ts

diff --git a/integration/svg-in-node-modules-test.ts b/integration/svg-in-node-modules-test.ts
new file mode 100644
index 00000000000..2bd57a1274b
--- /dev/null
+++ b/integration/svg-in-node-modules-test.ts
@@ -0,0 +1,51 @@
+import { test, expect } from "@playwright/test";
+
+import { PlaywrightFixture } from "./helpers/playwright-fixture";
+import type { Fixture, AppFixture } from "./helpers/create-fixture";
+import { createAppFixture, createFixture, js } from "./helpers/create-fixture";
+
+let fixture: Fixture;
+let appFixture: AppFixture;
+
+test.beforeEach(async ({ context }) => {
+  await context.route(/_data/, async (route) => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    route.continue();
+  });
+});
+
+test.beforeAll(async () => {
+  fixture = await createFixture({
+    config: {
+      future: { v2_routeConvention: true },
+    },
+    files: {
+      "app/routes/_index.jsx": js`
+        import imgSrc from "getos/imgs/logo.svg";
+
+        export default function () {
+          return (
+            <div>
+              <img src={imgSrc} data-testid="example-svg" alt="example img"/>
+            </div>
+          )
+        }
+      `,
+    },
+  });
+
+  appFixture = await createAppFixture(fixture);
+});
+
+test.afterAll(() => {
+  appFixture.close();
+});
+
+test("renders SVG images imported from node_modules", async ({ page }) => {
+  let app = new PlaywrightFixture(appFixture, page);
+  // You can test any request your app might get using `fixture`.
+  await app.goto("/");
+  expect(await page.getByTestId("example-svg").getAttribute("src")).toMatch(
+    /\/build\/_assets\/logo-.*\.svg/
+  );
+});
diff --git a/packages/remix-dev/compiler/server/plugins/bareImports.ts b/packages/remix-dev/compiler/server/plugins/bareImports.ts
index 75c95a1d45b..f9d6d653127 100644
--- a/packages/remix-dev/compiler/server/plugins/bareImports.ts
+++ b/packages/remix-dev/compiler/server/plugins/bareImports.ts
@@ -11,6 +11,7 @@ import { isCssSideEffectImportPath } from "../../plugins/cssSideEffectImports";
 import { createMatchPath } from "../../utils/tsconfig";
 import { detectPackageManager } from "../../../cli/detectPackageManager";
 import type { Context } from "../../context";
+import { getLoaderForFile } from "../../utils/loaders";
 
 /**
  * A plugin responsible for resolving bare module ids based on server target.
@@ -60,8 +61,23 @@ export function serverBareModulesPlugin(ctx: Context): Plugin {
           return undefined;
         }
 
-        // Always bundle CSS files so we get immutable fingerprinted asset URLs.
-        if (path.endsWith(".css")) {
+        // Skip assets that are treated as files (.css, .svg, .png, etc.).
+        // Otherwise, esbuild would emit code that would attempt to require()
+        // or import these files --- which aren't JavaScript!
+        let loader;
+        try {
+          loader = getLoaderForFile(path);
+        } catch (e) {
+          if (
+            !(
+              e instanceof Error &&
+              e.message.startsWith("Cannot get loader for file")
+            )
+          ) {
+            throw e;
+          }
+        }
+        if (loader === "file") {
           return undefined;
         }
 

From e8567c035506fdedcf8ae5c727c17447518fb30c Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.p.singer@nasa.gov>
Date: Sun, 6 Aug 2023 23:01:23 -0400
Subject: [PATCH 2/3] Update integration/svg-in-node-modules-test.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
---
 integration/svg-in-node-modules-test.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/integration/svg-in-node-modules-test.ts b/integration/svg-in-node-modules-test.ts
index 2bd57a1274b..cd2d60bc1c9 100644
--- a/integration/svg-in-node-modules-test.ts
+++ b/integration/svg-in-node-modules-test.ts
@@ -16,9 +16,6 @@ test.beforeEach(async ({ context }) => {
 
 test.beforeAll(async () => {
   fixture = await createFixture({
-    config: {
-      future: { v2_routeConvention: true },
-    },
     files: {
       "app/routes/_index.jsx": js`
         import imgSrc from "getos/imgs/logo.svg";

From 61dc58a76d70d82e595eb4386e58eed3d36be6c6 Mon Sep 17 00:00:00 2001
From: Leo Singer <leo.p.singer@nasa.gov>
Date: Sun, 6 Aug 2023 23:01:42 -0400
Subject: [PATCH 3/3] Update integration/svg-in-node-modules-test.ts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
---
 integration/svg-in-node-modules-test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/integration/svg-in-node-modules-test.ts b/integration/svg-in-node-modules-test.ts
index cd2d60bc1c9..96e604c02b8 100644
--- a/integration/svg-in-node-modules-test.ts
+++ b/integration/svg-in-node-modules-test.ts
@@ -17,7 +17,7 @@ test.beforeEach(async ({ context }) => {
 test.beforeAll(async () => {
   fixture = await createFixture({
     files: {
-      "app/routes/_index.jsx": js`
+      "app/routes/_index.tsx": js`
         import imgSrc from "getos/imgs/logo.svg";
 
         export default function () {