diff --git a/.changeset/olive-donkeys-shave.md b/.changeset/olive-donkeys-shave.md new file mode 100644 index 000000000..f863a3e12 --- /dev/null +++ b/.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 diff --git a/packages/start/src/config/dev-toolbar-deps.spec.ts b/packages/start/src/config/dev-toolbar-deps.spec.ts new file mode 100644 index 000000000..b6cf84dc8 --- /dev/null +++ b/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(); +}); diff --git a/packages/start/src/config/index.ts b/packages/start/src/config/index.ts index 9ad41a3f7..1793e1c56 100644 --- a/packages/start/src/config/index.ts +++ b/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 { environments: { [VITE_ENVIRONMENTS.client]: { consumer: "client", + ...(start.devOverlay + ? { optimizeDeps: { include: DEV_TOOLBAR_COMMONJS_DEPENDENCIES } } + : {}), build: { write: true, manifest: true,