Typing $props makes Vite crash

[frederichoule]

Describe the bug

I have yet to pinpoint the exact version that causes this bug, but it's present in the latest version, when creating a new app with npx sv create. Any kind of types declared for $props makes Vite crash.

Reproduction

Works:

<script lang="ts">
	import '../app.css';
	let { children } = $props();
</script>

{@render children()}

Doesn't work:

<script lang="ts">
	import type { Snippet } from 'svelte';
	import '../app.css';
	let { children }: { children: Snippet } = $props();
</script>

{@render children()}

Logs

2:06:00 p.m. [vite] (ssr) Error when evaluating SSR module /src/routes/+layout.svelte:
|- TypeError: Cannot read properties of undefined (reading 'startsWith')
    at couldBeFixedByCssPreprocessor (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:111:72)
    at enhanceCompileError (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:126:6)
    at compileSvelte (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:148:4)
    at async TransformPluginContext.transform (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:164:20)
    at async EnvironmentPluginContainer.transform (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18)
    at async loadAndTransform (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)
    at async fetchModule (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:51171:16)
    at async handleInvoke (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:43945:22)
    at async EventEmitter.listenerForInvokeHandler (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:44018:19)

Error [TypeError]: Cannot read properties of undefined (reading 'startsWith')
    at couldBeFixedByCssPreprocessor (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:111:72)
    at enhanceCompileError (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:126:6)
    at compileSvelte (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:148:4)
    at async TransformPluginContext.transform (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7_yaml@2.6.1_/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:164:20)
    at async EnvironmentPluginContainer.transform (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18)
    at async loadAndTransform (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)
    at async fetchModule (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:51171:16)
    at async handleInvoke (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:43945:22)
    at async EventEmitter.listenerForInvokeHandler (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:44018:19) {
  id: '/Users/frederichoule/Projects/my-app/src/routes/+layout.svelte',
  frame: '',
  code: undefined,
  plugin: 'vite-plugin-svelte',
  pluginCode: '<script lang="ts">\n' +
    "\timport type { Snippet } from 'svelte';\n" +
    "\timport '../app.css';\n" +
    '\tlet { children }: { children: Snippet } = $props();\n' +
    '</script>\n' +
    '\n' +
    '{@render children()}\n',
  runnerError: Error: RunnerError
      at reviveInvokeError (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/module-runner.js:545:18)
      at Object.invoke (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/module-runner.js:628:15)
      at async SSRCompatModuleRunner.getModuleInformation (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/module-runner.js:1200:73)
      at async SSRCompatModuleRunner.import (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/module-runner.js:1110:27)
      at async instantiateModule (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/vite@6.0.3_jiti@1.21.7_yaml@2.6.1/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:30569:12)
      at async loud_ssr_load_module (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+kit@2.12.1_@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7__6hsfs4xcuxjgk5gzdb4doj5cqa/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:69:11)
      at async resolve (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+kit@2.12.1_@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7__6hsfs4xcuxjgk5gzdb4doj5cqa/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:96:18)
      at async result.component (file:///Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+kit@2.12.1_@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7__6hsfs4xcuxjgk5gzdb4doj5cqa/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:165:41)
      at async Promise.all (index 0)
      at async render_response (/Users/frederichoule/Projects/my-app/node_modules/.pnpm/@sveltejs+kit@2.12.1_@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3_jiti@1.21.7__6hsfs4xcuxjgk5gzdb4doj5cqa/node_modules/@sveltejs/kit/src/runtime/server/page/render.js:88:21)
}

System Info

System:
    OS: macOS 15.1.1
    CPU: (8) arm64 Apple M2
    Memory: 150.69 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.11.0 - ~/.local/state/fnm_multishells/8294_1734448366371/bin/node
    npm: 10.9.0 - ~/.local/state/fnm_multishells/8294_1734448366371/bin/npm
    pnpm: 9.15.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.140
    Safari: 18.1.1
  npmPackages:
    svelte: ^5.0.0 => 5.14.2

Severity

blocking an upgrade

[yaman-cruise]

Same issue here. I could swear it worked before but now even with svelte 5.0.0 I get this error.

[frederichoule]

Yes, it did work before, and same here, even when reverting to earlier version I get the error. I will revert each package one by one to see which one is causing that.

[khromov]

Seeing this too, builtin types crash too, for example:

<script lang="ts">
	let swiperContainer: HTMLDivElement;
</script>

Leads to:

[plugin:vite-plugin-svelte] Cannot read properties of undefined (reading 'startsWith')
/Users/k/Documents/GitHub/x/src/routes/+page.svelte
    at couldBeFixedByCssPreprocessor (file:///Users/k/Documents/GitHub/x/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:111:72)
    at enhanceCompileError (file:///Users/k/Documents/GitHub/x/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:126:6)
    at compileSvelte (file:///Users/k/Documents/GitHub/x/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:148:4)
    at async TransformPluginContext.transform (file:///Users/k/Documents/GitHub/x/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:164:20)
    at async EnvironmentPluginContainer.transform (file:///Users/k/Documents/GitHub/x/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18)
    at async loadAndTransform (file:///Users/k/Documents/GitHub/x/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)
    at async viteTransformMiddleware (file:///Users/k/Documents/GitHub/x/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:42296:24

[denovodavid]

Seems an issue with esrap@1.3.0 dependency.
pnpm overriding in package.json fixes the issue for me.

"pnpm": {
    "overrides": {
      "esrap@1.3.0": "1.2.3"
    }
  }

[clearfram3]

Didn't have this issue till upgraded to 5.14.2 and removed/installed the Svelte for vscode plugin. Going back to 5.14.1 didn't solve it.

[frederichoule]

Seems an issue with esrap@1.3.0 dependency. pnpm overriding in package.json fixes the issue for me.

"pnpm": {
    "overrides": {
      "esrap@1.3.0": "1.2.3"
    }
  }

That seems to fix the issue for me too.

[360matt]

There are more context on:
sveltejs/vite-plugin-svelte#1053 (comment)

[luddovitz]

Was upgrading today as well and hit by this. It do work if removing your lock file, overriding esrap, and reinstalling. Something in esrap sure broke something.

"overrides": {
		"svelte": {
			"esrap": "1.2.3"
		}
	}

[Rich-Harris]

fixed in 5.14.3