fix: resolve modules with vite fetchModule during dev style collection

Author: katywings

packages/start/src/config/manifest.ts

@@ -3,6 +3,7 @@ import { type PluginOption, type ViteDevServer } from "vite";
 import { findStylesInModuleGraph } from "../server/collect-styles.ts";
 import { VIRTUAL_MODULES } from "./constants.ts";
 import { type SolidStartOptions } from "./index.ts";
+import { wrapId } from "./vite-utils.ts";
 
 export function manifest(start: SolidStartOptions): PluginOption {
   let devServer: ViteDevServer = undefined!;
@@ -72,7 +73,7 @@ export function manifest(start: SolidStartOptions): PluginOption {
 							"data-vite-dev-id": "${key}",
 							"data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
+						children: () => import("${wrapId(value)}?inline").then(mod => mod.default),
 					}`,
           );
 

packages/start/src/config/vite-utils.ts

@@ -12,6 +12,7 @@ export const FS_PREFIX = `/@fs/`;
 export const VALID_ID_PREFIX = `/@id/`;
 
 export const NULL_BYTE_PLACEHOLDER = `__x00__`;
+const NULL_BYTE_REGEX = /^\0/;
 
 export function normalizeResolvedIdToUrl(
   environment: DevEnvironment,
@@ -52,10 +53,13 @@ export function normalizeResolvedIdToUrl(
   return url;
 }
 
+/**
+ * Inspired by:
+ * https://github.com/withastro/astro/blob/fddde5fad81007795eb263c7fd0cea096b8e2cba/packages/astro/src/core/util.ts#L115
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/shared/utils.ts#L11
+ */
 export function wrapId(id: string): string {
-  return id.startsWith(VALID_ID_PREFIX)
-    ? id
-    : VALID_ID_PREFIX + id.replace("\0", NULL_BYTE_PLACEHOLDER);
+  return id.replace(NULL_BYTE_REGEX, `${VALID_ID_PREFIX}${NULL_BYTE_PLACEHOLDER}`);
 }
 
 export function unwrapId(id: string): string {

packages/start/src/server/collect-styles.ts

@@ -1,40 +1,23 @@
 import path from "node:path";
-import { resolve } from "pathe";
 import type { DevEnvironment, EnvironmentModuleNode } from "vite";
 
-async function getViteModuleNode(vite: DevEnvironment, file: string) {
-  let nodePath = file;
-  let node = vite.moduleGraph.getModuleById(file);
-
-  if (!node) {
-    const resolvedId = await vite.pluginContainer.resolveId(file, undefined);
-    if (!resolvedId) return;
-
-    nodePath = resolvedId.id;
-    node = vite.moduleGraph.getModuleById(file);
-  }
-
-  if (!node) {
-    nodePath = resolve(nodePath);
-    node = await vite.moduleGraph.getModuleByUrl(file);
-  }
-
-  if (!node) {
-    await vite.moduleGraph.ensureEntryFromUrl(nodePath, false);
-    node = vite.moduleGraph.getModuleById(nodePath);
-  }
-
-  return node;
+async function getViteModuleNode(vite: DevEnvironment, file: string, importer?: string) {
+  try {
+    const res = await vite.fetchModule(file, importer);
+    if (!("id" in res)) return;
+    return vite.moduleGraph.getModuleById(res.id);
+  } catch (err) {}
 }
 
 async function findModuleDependencies(
   vite: DevEnvironment,
   file: string,
   deps: Set<EnvironmentModuleNode>,
   crawledFiles = new Set<string>(),
+  importer?: string,
 ) {
   crawledFiles.add(file);
-  const module = await getViteModuleNode(vite, file);
+  const module = await getViteModuleNode(vite, file, importer);
   if (!module?.id || deps.has(module)) return;
 
   deps.add(module);
@@ -53,7 +36,7 @@ async function findModuleDependencies(
     if (crawledFiles.has(dep)) {
       continue;
     }
-    await findModuleDependencies(vite, dep, deps, crawledFiles);
+    await findModuleDependencies(vite, dep, deps, crawledFiles, module.id);
   }
 }