fix: pre-bundle the dev toolbar's CommonJS dependencies

Author: adipascu

.changeset/olive-donkeys-shave.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+Pre-bundle the dev toolbar's CommonJS dependencies so it no longer throws on every dev page load

packages/start/src/config/dev-toolbar-deps.spec.ts

@@ -0,0 +1,52 @@
+import { mkdirSync, mkdtempSync, realpathSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import type { Plugin } from "vite";
+import { afterEach, expect, it } from "vitest";
+
+import { solidStart, type SolidStartOptions } from "./index.ts";
+
+const cwd = process.cwd();
+const roots: string[] = [];
+
+afterEach(() => {
+  process.chdir(cwd);
+  for (const root of roots.splice(0)) rmSync(root, { recursive: true });
+});
+
+async function resolveDevConfig(options?: SolidStartOptions) {
+  const root = realpathSync.native(mkdtempSync(join(tmpdir(), "solid-start-dev-toolbar-deps-")));
+  roots.push(root);
+  mkdirSync(join(root, "src"));
+  writeFileSync(join(root, "package.json"), "{}");
+  writeFileSync(join(root, "src/app.tsx"), "export default function App() {}");
+  process.chdir(root);
+
+  const plugin = solidStart(options).find(
+    (candidate): candidate is Plugin =>
+      typeof candidate === "object" &&
+      candidate !== null &&
+      "name" in candidate &&
+      candidate.name === "solid-start:config",
+  );
+  const config = plugin?.config;
+  const handler = typeof config === "function" ? config : config?.handler;
+  return (await handler?.call({} as never, {}, { command: "serve", mode: "development" })) as
+    | { environments?: { client?: { optimizeDeps?: { include?: string[] } } } }
+    | undefined;
+}
+
+it("pre-bundles the dev toolbar's CommonJS dependencies", async () => {
+  const config = await resolveDevConfig();
+
+  expect(config?.environments?.client?.optimizeDeps?.include).toEqual([
+    "@solidjs/start > source-map-js",
+    "@solidjs/start > error-stack-parser",
+  ]);
+});
+
+it("leaves them alone when the dev toolbar is disabled", async () => {
+  const config = await resolveDevConfig({ devOverlay: false });
+
+  expect(config?.environments?.client?.optimizeDeps).toBeUndefined();
+});

packages/start/src/config/index.ts

@@ -199,6 +199,11 @@ export interface SolidStartOptions {
   };
 }
 
+const DEV_TOOLBAR_COMMONJS_DEPENDENCIES = [
+  "@solidjs/start > source-map-js",
+  "@solidjs/start > error-stack-parser",
+];
+
 const absolute = (path: string, root: string) =>
   path ? (isAbsolute(path) ? path : join(root, path)) : path;
 
@@ -291,6 +296,9 @@ export function solidStart(options?: SolidStartOptions): Array<PluginOption> {
           environments: {
             [VITE_ENVIRONMENTS.client]: {
               consumer: "client",
+              ...(start.devOverlay
+                ? { optimizeDeps: { include: DEV_TOOLBAR_COMMONJS_DEPENDENCIES } }
+                : {}),
               build: {
                 write: true,
                 manifest: true,