fix(vite): error when npm package requires json files (#3210)

Author: marvinhagemeister

deno.lock

@@ -0,0 +1,14 @@
+import * as mime from "mime-db";
+import { useEffect, useState } from "preact/hooks";
+
+export function MimeIsland() {
+  // deno-lint-ignore no-console
+  console.log(mime);
+
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    setReady(true);
+  }, []);
+
+  return <h1 class={ready ? "ready" : ""}>mime</h1>;
+}

packages/plugin-vite/demo/islands/tests/Mime.tsx

@@ -0,0 +1,5 @@
+import { MimeIsland } from "../../islands/tests/Mime.tsx";
+
+export default function Page() {
+  return <MimeIsland />;
+}

packages/plugin-vite/demo/routes/tests/mime.tsx

@@ -24,6 +24,7 @@
     "@prefresh/vite": "npm:@prefresh/vite@^2.4.8",
     "@types/babel__core": "npm:@types/babel__core@^7.20.5",
     "@types/node": "npm:@types/node@^24.1.0",
+    "mime-db": "npm:mime-db@^1.54.0",
     "preact": "npm:preact@^10.26.9",
     "vite": "npm:vite@^7.0.6",
     "vite-plugin-inspect": "npm:vite-plugin-inspect@^11.3.2"

packages/plugin-vite/deno.json

@@ -50,7 +50,7 @@ export function deno(): Plugin {
           return id;
         }
 
-        const type = getDenoType(options.attributes.type ?? "default");
+        const type = getDenoType(id, options.attributes.type ?? "default");
         if (
           type !== RequestedModuleType.Default ||
           /^(https?|jsr|npm):/.test(resolved) ||
@@ -179,7 +179,7 @@ function parseDenoSpecifier(
   return { type: +match[1], specifier };
 }
 
-function getDenoType(type: string): RequestedModuleType {
+function getDenoType(id: string, type: string): RequestedModuleType {
   switch (type) {
     case "json":
       return RequestedModuleType.Json;
@@ -188,6 +188,9 @@ function getDenoType(type: string): RequestedModuleType {
     case "text":
       return RequestedModuleType.Text;
     default:
+      if (id.endsWith(".json")) {
+        return RequestedModuleType.Json;
+      }
       return RequestedModuleType.Default;
   }
 }

packages/plugin-vite/src/plugins/deno.ts

@@ -142,3 +142,28 @@ Deno.test({
   sanitizeOps: false,
   sanitizeResources: false,
 });
+
+Deno.test({
+  name: "vite build - load json inside npm package",
+  fn: async () => {
+    await using res = await buildVite(DEMO_DIR);
+
+    await withChildProcessServer(
+      {
+        cwd: res.tmp,
+        args: ["serve", "-A", "--port", "0", "_fresh/server.js"],
+      },
+      async (address) => {
+        await withBrowser(async (page) => {
+          await page.goto(`${address}/tests/mime`, {
+            waitUntil: "networkidle2",
+          });
+
+          await page.locator(".ready").wait();
+        });
+      },
+    );
+  },
+  sanitizeOps: false,
+  sanitizeResources: false,
+});

packages/plugin-vite/tests/build_test.ts

@@ -128,3 +128,19 @@ Deno.test({
   sanitizeResources: false,
   sanitizeOps: false,
 });
+
+Deno.test({
+  name: "vite dev - can import json in npm package",
+  fn: async () => {
+    await withDevServer(DEMO_DIR, async (address) => {
+      await withBrowser(async (page) => {
+        await page.goto(`${address}/tests/mime`, {
+          waitUntil: "networkidle2",
+        });
+        await page.locator(".ready").wait();
+      });
+    });
+  },
+  sanitizeResources: false,
+  sanitizeOps: false,
+});