@solidjs/start 2.0.0-alpha.1 → 2.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @solidjs/start
 
+## 2.0.0-alpha.2
+
+### Minor Changes
+
+- 10bf932: Fix path resolution on Windows
+- 40d5a27: fix onBeforeResponse
+- 9201e71: fix text/html missing when ssr is false
+- a9cd2cc: add `vite preview` support
+
+### Patch Changes
+
+- 7077a49: Fixed CSS from shared chunks not being collected via the chunk name.
+- a620eeb: Fixed virtual module CSS not being collected in vite dev.
+
 ## 2.0.0-alpha.1
 
 ### Patch Changes

package/dist/config/dev-server.js

@@ -5,6 +5,16 @@ export function devServer() {
     return [
         {
             name: "solid-start-dev-server",
+            configurePreviewServer(server) {
+                return () => {
+                    server.middlewares.use(async (req, res) => {
+                        res.setHeader("content-encoding", "identity");
+                        const webReq = new NodeRequest({ req, res });
+                        const def = await import(process.cwd() + "/dist/server/entry-server.js");
+                        sendNodeResponse(res, await def.default.fetch(webReq));
+                    });
+                };
+            },
             configureServer(viteDevServer) {
                 globalThis.VITE_DEV_SERVER = viteDevServer;
                 return async () => {

package/dist/config/fs-routes/router.js

@@ -1,12 +1,11 @@
-import { init } from "es-module-lexer";
-import { parse } from "es-module-lexer";
+import { init, parse } from "es-module-lexer";
 import esbuild from "esbuild";
 import fg from "fast-glob";
 import fs from "fs";
 import micromatch from "micromatch";
 import { posix } from "path";
 import { pathToRegexp } from "path-to-regexp";
-import { normalize } from "node:path";
+import { normalizePath } from "vite";
 export { pathToRegexp };
 export const glob = (path) => fg.sync(path, { absolute: true });
 export function cleanPath(src, config) {
@@ -76,7 +75,7 @@ export class BaseFileSystemRouter extends EventTarget {
         this.routes.push(route);
     }
     async addRoute(src) {
-        src = normalize(src);
+        src = normalizePath(src);
         if (this.isRoute(src)) {
             try {
                 const route = this.toRoute(src);
@@ -99,7 +98,7 @@ export class BaseFileSystemRouter extends EventTarget {
         }));
     }
     async updateRoute(src) {
-        src = normalize(src);
+        src = normalizePath(src);
         if (this.isRoute(src)) {
             try {
                 const route = this.toRoute(src);
@@ -115,7 +114,7 @@ export class BaseFileSystemRouter extends EventTarget {
         }
     }
     removeRoute(src) {
-        src = normalize(src);
+        src = normalizePath(src);
         if (this.isRoute(src)) {
             const path = this.toPath(src);
             if (path === undefined) {

package/dist/config/index.js

@@ -1,8 +1,9 @@
 import { TanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
 import { defu } from "defu";
 import { globSync } from "node:fs";
-import { extname, isAbsolute, join, normalize } from "node:path";
+import { extname, isAbsolute, join } from "node:path";
 import { fileURLToPath } from "node:url";
+import { normalizePath } from "vite";
 import solid from "vite-plugin-solid";
 import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.js";
 import { devServer } from "./dev-server.js";
@@ -112,8 +113,10 @@ export function solidStart(options) {
                     define: {
                         "import.meta.env.MANIFEST": `globalThis.MANIFEST`,
                         "import.meta.env.START_SSR": JSON.stringify(start.ssr),
-                        "import.meta.env.START_APP_ENTRY": `"${appEntryPath}"`,
-                        "import.meta.env.START_CLIENT_ENTRY": `"${handlers.client}"`,
+                        // Use JSON.stringify so backslashes on Windows are escaped and
+                        // esbuild receives a valid JS string literal for the define value
+                        "import.meta.env.START_APP_ENTRY": JSON.stringify(appEntryPath),
+                        "import.meta.env.START_CLIENT_ENTRY": JSON.stringify(handlers.client),
                         "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
                     },
                     builder: {
@@ -160,19 +163,19 @@ export function solidStart(options) {
                 {
                     envConsumer: "client",
                     envName: VITE_ENVIRONMENTS.client,
-                    getRuntimeCode: () => `import { createServerReference } from "${normalize(fileURLToPath(new URL("../server/server-runtime", import.meta.url)))}"`,
+                    getRuntimeCode: () => `import { createServerReference } from "${normalizePath(fileURLToPath(new URL("../server/server-runtime", import.meta.url)))}"`,
                     replacer: opts => `createServerReference('${opts.functionId}')`,
                 },
                 {
                     envConsumer: "server",
                     envName: VITE_ENVIRONMENTS.server,
-                    getRuntimeCode: () => `import { createServerReference } from '${normalize(fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)))}'`,
+                    getRuntimeCode: () => `import { createServerReference } from '${normalizePath(fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)))}'`,
                     replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
                 },
             ],
             provider: {
                 envName: VITE_ENVIRONMENTS.server,
-                getRuntimeCode: () => `import { createServerReference } from '${normalize(fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)))}'`,
+                getRuntimeCode: () => `import { createServerReference } from '${normalizePath(fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)))}'`,
                 replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
             },
         }),

package/dist/config/lazy.js

@@ -35,13 +35,42 @@ const importTransform = () => {
 const fileEndingRegex = /(ts|js)x(\?.*)?$/;
 const lazy = () => {
     const cwd = process.cwd().replaceAll(osSep, sep);
+    /**
+     * Maps module ids to their client-specific shared chunk names.
+     * Modules in shared chunks need to find their assets via the chunk name, instead of their module id.
+     *
+     * Vite includes assets of such modules in the manifest via the chunk name:
+     * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+     * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L319
+     *
+     * Rollup occassionally creates shared chunks automatically,
+     * but they can also be manually created by the user via:
+     * https://rollupjs.org/configuration-options/#output-manualchunks
+     *
+     * More infos on Rollup's logic:
+     * https://github.com/rollup/rollup/issues/3772#issuecomment-689955168
+     */
+    const sharedChunkNames = {};
     return {
         name: "solid-lazy-css",
         enforce: "pre",
-        applyToEnvironment(env) {
-            return env.name === VITE_ENVIRONMENTS.server;
+        generateBundle(_, bundle) {
+            if (this.environment.name !== VITE_ENVIRONMENTS.client)
+                return;
+            for (const chunk of Object.values(bundle)) {
+                if (chunk.type !== "chunk" || !chunk.isDynamicEntry || chunk.facadeModuleId)
+                    continue;
+                // Has to follow Vites implementation:
+                // https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+                const chunkName = `_${basename(chunk.fileName)}`;
+                for (const id of chunk.moduleIds) {
+                    sharedChunkNames[id] = chunkName;
+                }
+            }
         },
         async transform(src, id) {
+            if (this.environment.name !== VITE_ENVIRONMENTS.server)
+                return;
             if (!id.match(fileEndingRegex))
                 return;
             // The transformed files either import "lazy" or css files
@@ -52,7 +81,8 @@ const lazy = () => {
             const hasDefaultExport = src.indexOf("export default") !== -1;
             if (hasDefaultExport) {
                 const localId = relative(cwd, id);
-                plugins.push(idTransform(localId));
+                const chunkName = sharedChunkNames[id];
+                plugins.push(idTransform(chunkName ?? localId));
             }
             const hasLazy = src.indexOf("lazy(") !== -1;
             if (hasLazy)

package/dist/config/manifest.js

@@ -1,5 +1,6 @@
 import { findStylesInModuleGraph } from "../server/collect-styles.js";
 import { VIRTUAL_MODULES } from "./constants.js";
+import { wrapId } from "./vite-utils.js";
 export function manifest(start) {
     let devServer = undefined;
     return {
@@ -61,10 +62,10 @@ export function manifest(start) {
 						tag: "style",
 						attrs: {
 							type: "text/css",
-							"data-vite-dev-id": "${key}",
+							"data-vite-dev-id": "${wrapId(key)}",
 							"data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
+						children: () => import("${wrapId(value)}?inline").then(mod => mod.default),
 					}`);
                     return `export default [${cssAssets.join(",")}]`;
                 }

package/dist/config/vite-utils.d.ts

@@ -4,6 +4,11 @@ export declare const FS_PREFIX = "/@fs/";
 export declare const VALID_ID_PREFIX = "/@id/";
 export declare const NULL_BYTE_PLACEHOLDER = "__x00__";
 export declare function normalizeResolvedIdToUrl(environment: DevEnvironment, url: string, resolved: Rollup.PartialResolvedId): string;
+/**
+ * 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 declare function wrapId(id: string): string;
 export declare function unwrapId(id: string): string;
 export declare function normalizeViteImportAnalysisUrl(environment: DevEnvironment, id: string): string;

package/dist/config/vite-utils.js

@@ -7,6 +7,7 @@ export function cleanUrl(url) {
 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, url, resolved) {
     const root = environment.config.root;
     const depsOptimizer = environment.depsOptimizer;
@@ -38,10 +39,13 @@ export function normalizeResolvedIdToUrl(environment, url, resolved) {
     }
     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) {
-    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) {
     return id.startsWith(VALID_ID_PREFIX)

package/dist/middleware/index.d.ts

@@ -9,10 +9,13 @@ type ResponseMiddlewareResponseParam = {
     body?: Awaited<EventHandlerResponse>;
 };
 export type ResponseMiddleware = (event: FetchEvent, response: ResponseMiddlewareResponseParam) => Response | Promise<Response> | void | Promise<void>;
+/**
+ * Creates middleware for handling requests and responses.
+ *
+ * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
+ */
 export declare function createMiddleware(args: {
-    /** @deprecated Use H3 `Middleware` */
     onRequest?: RequestMiddleware | RequestMiddleware[] | undefined;
-    /** @deprecated Use H3 `Middleware` */
     onBeforeResponse?: ResponseMiddleware | ResponseMiddleware[] | undefined;
 } | Middleware[]): Middleware[];
 export {};

package/dist/middleware/index.js

@@ -13,12 +13,17 @@ function wrapResponseMiddleware(onBeforeResponse) {
         const resp = await next();
         const fetchEvent = getFetchEvent(h3Event);
         const mwResponse = await onBeforeResponse(fetchEvent, {
-            body: resp?.body,
+            body: resp,
         });
         if (mwResponse)
             return mwResponse;
     };
 }
+/**
+ * Creates middleware for handling requests and responses.
+ *
+ * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
+ */
 export function createMiddleware(args) {
     if (Array.isArray(args))
         return args;

package/dist/server/StartServer.jsx

@@ -2,6 +2,7 @@ import { Hydration, HydrationScript, NoHydration, getRequestEvent, ssr } from "s
 import App from "solid-start:app";
 import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary.jsx";
 import { useAssets } from "./assets/index.js";
+import PatchVirtualDevStyles from "./assets/PatchVirtualDevStyles.jsx";
 import { getSsrManifest } from "./manifest/ssr-manifest.js";
 const docType = ssr("<!DOCTYPE html>");
 /**
@@ -17,6 +18,7 @@ export function StartServer(props) {
       {docType}
       <TopErrorBoundary>
         <props.document assets={<HydrationScript />} scripts={<>
+              <PatchVirtualDevStyles nonce={nonce}/>
               <script type="module" nonce={nonce} async src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}/>
             </>}>
           {!import.meta.env.START_ISLANDS ? (<Hydration>

package/dist/server/assets/PatchVirtualDevStyles.d.ts

@@ -0,0 +1,4 @@
+declare const PatchVirtualDevStyles: (props: {
+    nonce?: string;
+}) => import("solid-js").JSX.Element;
+export default PatchVirtualDevStyles;

package/dist/server/assets/PatchVirtualDevStyles.jsx

@@ -0,0 +1,28 @@
+/**
+ * Patches the data-vite-dev-id attribute for style tags of virtual modules
+ *
+ * Per Vite's convention, virtual module ids are prefixed with \0 (null byte):
+ * https://vite.dev/guide/api-plugin#virtual-modules-convention
+ *
+ * However this null byte cannot be server rendered properly.
+ * Vite client runtime then fails to find style's with wrong null bytes,
+ * and instead inserts duplicate style's.
+ *
+ * This patch replaces the serializable /@id/__x00__ with the proper null byte,
+ * and has to run before Vite's client runtime:
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/client/client.ts#L529
+ *
+ * TODO: This should be solved in Vite directly!
+ */
+const patch = function () {
+    document.querySelectorAll("style[data-vite-dev-id]").forEach(function (el) {
+        el.setAttribute("data-vite-dev-id", el.dataset.viteDevId.replace("/@id/__x00__", "\0"));
+    });
+};
+const serializedPatch = `(${patch.toString()})();`;
+const PatchVirtualDevStyles = (props) => {
+    if (!import.meta.env.PROD) {
+        return <script nonce={props.nonce} innerHTML={serializedPatch}/>;
+    }
+};
+export default PatchVirtualDevStyles;

package/dist/server/collect-styles.js

@@ -1,28 +1,16 @@
 import path from "node:path";
-import { resolve } from "pathe";
-async function getViteModuleNode(vite, file) {
-    let nodePath = file;
-    let node = vite.moduleGraph.getModuleById(file);
-    if (!node) {
-        const resolvedId = await vite.pluginContainer.resolveId(file, undefined);
-        if (!resolvedId)
+async function getViteModuleNode(vite, file, importer) {
+    try {
+        const res = await vite.fetchModule(file, importer);
+        if (!("id" in res))
             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 vite.moduleGraph.getModuleById(res.id);
     }
-    return node;
+    catch (err) { }
 }
-async function findModuleDependencies(vite, file, deps, crawledFiles = new Set()) {
+async function findModuleDependencies(vite, file, deps, crawledFiles = new Set(), importer) {
     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);
@@ -40,7 +28,7 @@ async function findModuleDependencies(vite, file, deps, crawledFiles = new Set()
         if (crawledFiles.has(dep)) {
             continue;
         }
-        await findModuleDependencies(vite, dep, deps, crawledFiles);
+        await findModuleDependencies(vite, dep, deps, crawledFiles, module.id);
     }
 }
 // Vite doesn't expose these so we just copy the list for now

package/dist/server/handler.js

@@ -58,6 +58,7 @@ export function createBaseHandler(createPageEvent, fn, options = {}) {
                     const status = getExpectedRedirectStatus(context.response);
                     return redirect(context.response.headers.get("Location"), status);
                 }
+                event.response.headers.set("content-type", "text/html");
                 return html;
             }
             if (resolvedOptions.onCompleteAll) {

package/dist/server/spa/StartServer.jsx

@@ -2,6 +2,7 @@ import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
 import { getSsrManifest } from "../manifest/ssr-manifest.js";
 import { TopErrorBoundary } from "../../shared/ErrorBoundary.jsx";
 import { useAssets } from "../assets/index.js";
+import PatchVirtualDevStyles from "../assets/PatchVirtualDevStyles.jsx";
 const docType = ssr("<!DOCTYPE html>");
 /**
  *
@@ -16,6 +17,7 @@ export function StartServer(props) {
       {docType}
       <TopErrorBoundary>
         <props.document scripts={<>
+              <PatchVirtualDevStyles nonce={nonce}/>
               <script type="module" src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}/>
             </>}/>
       </TopErrorBoundary>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidjs/start",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "type": "module",
   "exports": {
     ".": "./dist/index.jsx",

package/src/config/dev-server.ts

@@ -11,6 +11,18 @@ export function devServer(): Array<PluginOption> {
   return [
     {
       name: "solid-start-dev-server",
+      configurePreviewServer(server) {
+        return () => {
+          server.middlewares.use(async (req, res) => {
+            res.setHeader("content-encoding", "identity");
+            const webReq = new NodeRequest({ req, res });
+            const def: {
+              default: { fetch: (req: Request) => Promise<Response> };
+            } = await import(process.cwd() + "/dist/server/entry-server.js");
+            sendNodeResponse(res, await def.default.fetch(webReq));
+          });
+        };
+      },
       configureServer(viteDevServer) {
         (globalThis as any).VITE_DEV_SERVER = viteDevServer;
         return async () => {

package/src/config/fs-routes/router.ts

@@ -1,5 +1,4 @@
-import { init } from "es-module-lexer";
-import { parse } from "es-module-lexer";
+import { init, parse } from "es-module-lexer";
 import esbuild from "esbuild";
 import fg from "fast-glob";
 import fs from "fs";
@@ -7,7 +6,7 @@ import micromatch from "micromatch";
 import { posix } from "path";
 import { pathToRegexp } from "path-to-regexp";
 
-import { normalize } from "node:path";
+import { normalizePath } from "vite";
 
 export { pathToRegexp };
 
@@ -104,7 +103,7 @@ export class BaseFileSystemRouter extends EventTarget {
   }
 
   async addRoute(src: string) {
-    src = normalize(src);
+    src = normalizePath(src);
     if (this.isRoute(src)) {
       try {
         const route = this.toRoute(src);
@@ -130,7 +129,7 @@ export class BaseFileSystemRouter extends EventTarget {
   }
 
   async updateRoute(src: string) {
-    src = normalize(src);
+    src = normalizePath(src);
     if (this.isRoute(src)) {
       try {
         const route = this.toRoute(src);
@@ -146,7 +145,7 @@ export class BaseFileSystemRouter extends EventTarget {
   }
 
   removeRoute(src: string) {
-    src = normalize(src);
+    src = normalizePath(src);
     if (this.isRoute(src)) {
       const path = this.toPath(src);
       if (path === undefined) {

package/src/config/index.ts

@@ -1,9 +1,9 @@
 import { TanStackServerFnPlugin } from "@tanstack/server-functions-plugin";
 import { defu } from "defu";
 import { globSync } from "node:fs";
-import { extname, isAbsolute, join, normalize } from "node:path";
+import { extname, isAbsolute, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { type PluginOption } from "vite";
+import { normalizePath, type PluginOption } from "vite";
 import solid, { type Options as SolidOptions } from "vite-plugin-solid";
 
 import { DEFAULT_EXTENSIONS, VIRTUAL_MODULES, VITE_ENVIRONMENTS } from "./constants.ts";
@@ -126,8 +126,10 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           define: {
             "import.meta.env.MANIFEST": `globalThis.MANIFEST`,
             "import.meta.env.START_SSR": JSON.stringify(start.ssr),
-            "import.meta.env.START_APP_ENTRY": `"${appEntryPath}"`,
-            "import.meta.env.START_CLIENT_ENTRY": `"${handlers.client}"`,
+            // Use JSON.stringify so backslashes on Windows are escaped and
+            // esbuild receives a valid JS string literal for the define value
+            "import.meta.env.START_APP_ENTRY": JSON.stringify(appEntryPath),
+            "import.meta.env.START_CLIENT_ENTRY": JSON.stringify(handlers.client),
             "import.meta.env.START_DEV_OVERLAY": JSON.stringify(start.devOverlay),
           },
           builder: {
@@ -173,8 +175,8 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           envConsumer: "client",
           envName: VITE_ENVIRONMENTS.client,
           getRuntimeCode: () =>
-            `import { createServerReference } from "${normalize(
-              fileURLToPath(new URL("../server/server-runtime", import.meta.url)),
+            `import { createServerReference } from "${normalizePath(
+              fileURLToPath(new URL("../server/server-runtime", import.meta.url))
             )}"`,
           replacer: opts => `createServerReference('${opts.functionId}')`,
         },
@@ -182,8 +184,8 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           envConsumer: "server",
           envName: VITE_ENVIRONMENTS.server,
           getRuntimeCode: () =>
-            `import { createServerReference } from '${normalize(
-              fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
+            `import { createServerReference } from '${normalizePath(
+              fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
             )}'`,
           replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
         },
@@ -191,8 +193,8 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
       provider: {
         envName: VITE_ENVIRONMENTS.server,
         getRuntimeCode: () =>
-          `import { createServerReference } from '${normalize(
-            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url)),
+          `import { createServerReference } from '${normalizePath(
+            fileURLToPath(new URL("../server/server-fns-runtime", import.meta.url))
           )}'`,
         replacer: opts => `createServerReference(${opts.fn}, '${opts.functionId}')`,
       },

package/src/config/lazy.ts

@@ -48,13 +48,43 @@ const fileEndingRegex = /(ts|js)x(\?.*)?$/;
 
 const lazy = (): PluginOption => {
   const cwd = process.cwd().replaceAll(osSep, sep);
+
+  /**
+   * Maps module ids to their client-specific shared chunk names.
+   * Modules in shared chunks need to find their assets via the chunk name, instead of their module id.
+   *
+   * Vite includes assets of such modules in the manifest via the chunk name:
+   * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+   * https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L319
+   *
+   * Rollup occassionally creates shared chunks automatically,
+   * but they can also be manually created by the user via:
+   * https://rollupjs.org/configuration-options/#output-manualchunks
+   *
+   * More infos on Rollup's logic:
+   * https://github.com/rollup/rollup/issues/3772#issuecomment-689955168
+   */
+  const sharedChunkNames: Record<string, string> = {};
+
   return {
     name: "solid-lazy-css",
     enforce: "pre",
-    applyToEnvironment(env) {
-      return env.name === VITE_ENVIRONMENTS.server;
+    generateBundle(_, bundle) {
+      if (this.environment.name !== VITE_ENVIRONMENTS.client) return;
+
+      for (const chunk of Object.values(bundle)) {
+        if (chunk.type !== "chunk" || !chunk.isDynamicEntry || chunk.facadeModuleId) continue;
+
+        // Has to follow Vites implementation:
+        // https://github.com/vitejs/vite/blob/4be37a8389c67873880f826b01fe40137e1c29a7/packages/vite/src/node/plugins/manifest.ts#L179
+        const chunkName = `_${basename(chunk.fileName)}`;
+        for (const id of chunk.moduleIds) {
+          sharedChunkNames[id] = chunkName;
+        }
+      }
     },
     async transform(src, id) {
+      if (this.environment.name !== VITE_ENVIRONMENTS.server) return;
       if (!id.match(fileEndingRegex)) return;
 
       // The transformed files either import "lazy" or css files
@@ -66,7 +96,8 @@ const lazy = (): PluginOption => {
       const hasDefaultExport = src.indexOf("export default") !== -1;
       if (hasDefaultExport) {
         const localId = relative(cwd, id);
-        plugins.push(idTransform(localId));
+        const chunkName = sharedChunkNames[id];
+        plugins.push(idTransform(chunkName ?? localId));
       }
 
       const hasLazy = src.indexOf("lazy(") !== -1;

package/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!;
@@ -69,10 +70,10 @@ export function manifest(start: SolidStartOptions): PluginOption {
 						tag: "style",
 						attrs: {
 							type: "text/css",
-							"data-vite-dev-id": "${key}",
+							"data-vite-dev-id": "${wrapId(key)}",
 							"data-vite-ref": "0",
 						},
-						children: () => import("${value}?inline").then(mod => mod.default),
+						children: () => import("${wrapId(value)}?inline").then(mod => mod.default),
 					}`,
           );
 

package/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 {

package/src/middleware/index.ts

@@ -36,18 +36,21 @@ function wrapResponseMiddleware(onBeforeResponse: ResponseMiddleware): Middlewar
 
     const fetchEvent = getFetchEvent(h3Event);
     const mwResponse = await onBeforeResponse(fetchEvent, {
-      body: (resp as any)?.body,
+      body: resp,
     });
     if (mwResponse) return mwResponse;
   };
 }
 
+/**
+ * Creates middleware for handling requests and responses.
+ *
+ * @see https://docs.solidjs.com/solid-start/reference/server/create-middleware
+ */
 export function createMiddleware(
   args:
     | {
-        /** @deprecated Use H3 `Middleware` */
         onRequest?: RequestMiddleware | RequestMiddleware[] | undefined;
-        /** @deprecated Use H3 `Middleware` */
         onBeforeResponse?: ResponseMiddleware | ResponseMiddleware[] | undefined;
       }
     | Middleware[],

package/src/server/StartServer.tsx

@@ -5,6 +5,7 @@ import App from "solid-start:app";
 
 import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary.tsx";
 import { useAssets } from "./assets/index.ts";
+import PatchVirtualDevStyles from "./assets/PatchVirtualDevStyles.tsx";
 import { getSsrManifest } from "./manifest/ssr-manifest.ts";
 import type { DocumentComponentProps, PageEvent } from "./types.ts";
 
@@ -29,6 +30,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
           assets={<HydrationScript />}
           scripts={
             <>
+              <PatchVirtualDevStyles nonce={nonce} />
               <script
                 type="module"
                 nonce={nonce}

package/src/server/assets/PatchVirtualDevStyles.tsx

@@ -0,0 +1,31 @@
+/**
+ * Patches the data-vite-dev-id attribute for style tags of virtual modules
+ *
+ * Per Vite's convention, virtual module ids are prefixed with \0 (null byte):
+ * https://vite.dev/guide/api-plugin#virtual-modules-convention
+ *
+ * However this null byte cannot be server rendered properly.
+ * Vite client runtime then fails to find style's with wrong null bytes,
+ * and instead inserts duplicate style's.
+ *
+ * This patch replaces the serializable /@id/__x00__ with the proper null byte,
+ * and has to run before Vite's client runtime:
+ * https://github.com/vitejs/vite/blob/130e7181a55c524383c63bbfb1749d0ff7185cad/packages/vite/src/client/client.ts#L529
+ *
+ * TODO: This should be solved in Vite directly!
+ */
+const patch = function () {
+  document.querySelectorAll<HTMLElement>("style[data-vite-dev-id]").forEach(function (el) {
+    el.setAttribute("data-vite-dev-id", el.dataset.viteDevId!.replace("/@id/__x00__", "\0"));
+  });
+};
+
+const serializedPatch = `(${patch.toString()})();`;
+
+const PatchVirtualDevStyles = (props: { nonce?: string }) => {
+  if (!import.meta.env.PROD) {
+    return <script nonce={props.nonce} innerHTML={serializedPatch} />;
+  }
+};
+
+export default PatchVirtualDevStyles;

package/src/server/collect-styles.ts

@@ -1,30 +1,12 @@
 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(
@@ -32,9 +14,10 @@ async function findModuleDependencies(
   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);
   }
 }
 

package/src/server/handler.ts

@@ -79,6 +79,8 @@ export function createBaseHandler(
           return redirect(context.response.headers.get("Location")!, status);
         }
 
+        event.response.headers.set("content-type", "text/html");
+
         return html;
       }
 

package/src/server/spa/StartServer.tsx

@@ -6,6 +6,7 @@ import { getSsrManifest } from "../manifest/ssr-manifest.ts";
 
 import { TopErrorBoundary } from "../../shared/ErrorBoundary.tsx";
 import { useAssets } from "../assets/index.ts";
+import PatchVirtualDevStyles from "../assets/PatchVirtualDevStyles.tsx";
 import type { DocumentComponentProps, PageEvent } from "../types.ts";
 
 const docType = ssr("<!DOCTYPE html>");
@@ -27,6 +28,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
         <props.document
           scripts={
             <>
+              <PatchVirtualDevStyles nonce={nonce} />
               <script
                 type="module"
                 src={getSsrManifest("client").path(import.meta.env.START_CLIENT_ENTRY)}