Cannot read properties of undefined (reading 'startsWith')

[ChocolatMilka]

Describe the bug

Error on use Typescript type.
All explications in "reproduction" field.

Using:

• SvelteKit
• Svelte 5
• Vite 6
• Selected Typescript in setup

Reproduction URL

http://localhost:5173/

Reproduction

How to reproduce the bug:

1. Create a new Sveltekit project, with typescript
2. Install deps and run dev
3. in +page.svelte, create a typed var: const test: string = "abc";

How to be sure that the bug comes from there:
4. Remove the type: const test = "abc";
5. The bug disappears

Logs

No response

System Info

at couldBeFixedByCssPreprocessor (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:111:72)
    at enhanceCompileError (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:126:6)
    at compileSvelte (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:148:4)
    at async handleHotUpdate (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/@sveltejs+vite-plugin-svelte@5.0.2_svelte@5.14.2_vite@6.0.3/node_modules/@sveltejs/vite-plugin-svelte/src/handle-hot-update.js:33:17)
    at async handleHMRUpdate (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/vite@6.0.3/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:44193:33)
    at async onHMRUpdate (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/vite@6.0.3/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:43585:7)
    at async FSWatcher.<anonymous> (file:///C:/Users/360matt/WebstormProjects/lemonade-loader/node_modules/.pnpm/vite@6.0.3/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:43622:5

[andreiciobanica]

+1 on me:

(not using Sveltekit)
I have:

- vite 6.0.3
- svelte 5.14.2 (tried with 5.14.1)
- tslib 2.8.1
- svelte-preprocess 6.0.3
- @sveltejs/vite-plugin-svelte 5.0.2

[ynot729]

confirmed a clean project using npx sv create triggers the issue when typescript is added to the +page.svelte

[dominikg]

please try downgrading esrap to ~1.2.0 via override in package.json

[JReinhold]

Adding some context here.

Having this +page.svelte:

<script lang="ts">
  const test: string = "abc";
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

Gives the error that OP reported:

|- TypeError: Cannot read properties of undefined (reading 'startsWith')
    at couldBeFixedByCssPreprocessor (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:111:72)
    at enhanceCompileError (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:126:6)
    at compileSvelte (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:148:4)
    at async TransformPluginContext.transform (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:164:20)
    at async EnvironmentPluginContainer.transform (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18)
    at async loadAndTransform (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)

Diving into node_modules and commenting out enhanceCompileError at https://github.com/sveltejs/vite-plugin-svelte/blob/main/packages/vite-plugin-svelte/src/utils/compile.js#L148 reveals the true error beneath.

Side node: enhanceCompileError should probably be wrapped in its own try-catch block, so that if it fails (like it does here) it doesn't obscure the actual error being thrown)

Actual error:

Error: Not implemented type annotation EmptyStatement
    at handle_type_annotation (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:560:10)
    at Identifier (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:1028:28)
    at handle (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:62:2)
    at VariableDeclarator (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:1531:3)
    at handle (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:62:2)
    at handle_var_declaration (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:319:3)
    at VariableDeclaration (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:1526:3)
    at handle (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:62:2)
    at handle_body (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:274:3)
    at BlockStatement|ClassBody (file:///Users/jeppe/dev/temp/esrap-issue/node_modules/esrap/src/handlers.js:620:3) {
  id: '/Users/jeppe/dev/temp/esrap-issue/src/routes/+page.svelte',
  frame: '',
  code: undefined,
  plugin: 'vite-plugin-svelte',
  pluginCode: '<script lang="ts">\n' +
    '  const test: string = "abc";\n' +
    '</script>\n' +
    '\n' +
    '<h1>Welcome to SvelteKit</h1>\n' +
    '<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>\n',

This is most likely caused by this recent PR sveltejs/esrap#13

Adding the following to https://github.com/Rich-Harris/esrap/blob/main/src/handlers.js#L560, reveals more:

console.dir({node, state}, {depth: 10});

logged result:

{
  node: { type: 'EmptyStatement' },
  state: {
    commands: [
      { type: 'Chunk', content: '_page', loc: null },
      '[',
      { type: 'Chunk', content: '$.FILENAME', loc: null },
      ']',
      ' = ',
      {
        type: 'Chunk',
        content: '"src/routes/+page.svelte"',
        loc: null
      },
      ';',
      { type: 'Sequence', children: [ '\n' ] },
      { type: 'Newline' },
      'import ',
      { type: 'Chunk', content: '* as $', loc: null },
      ' from ',
      { type: 'Chunk', content: '"svelte/internal/server"', loc: null },
      ';',
      { type: 'Sequence', children: [] },
      { type: 'Newline' },
      'function ',
      { type: 'Chunk', content: '_page', loc: null },
      '(',
      { type: 'Sequence', children: [] },
      { type: 'Chunk', content: '$$payload', loc: null },
      ',',
      { type: 'Sequence', children: [ ' ' ] },
      { type: 'Chunk', content: '$$props', loc: null },
      { type: 'Sequence', children: [] },
      ')',
      ' ',
      '{',
      { type: 'Indent' },
      { type: 'Newline' },
      { type: 'Chunk', content: '$.push', loc: null },
      '(',
      { type: 'Sequence', children: [] },
      { type: 'Chunk', content: '_page', loc: null },
      { type: 'Sequence', children: [] },
      ')',
      ';',
      { type: 'Sequence', children: [] },
      { type: 'Newline' },
      'const ',
      { type: 'Sequence', children: [] },
      {
        type: 'Chunk',
        content: 'test',
        loc: SourceLocation {
          start: Position { line: 2, column: 8 },
          end: Position { line: 2, column: 20 }
        }
      }
    ],
    comments: [],
    multiline: false
  }
}

And that's as far as I got.. 😴

[frederichoule]

please try downgrading esrap to ~1.2.0 via override in package.json

This is the correct temporary fix pending an update to the esrap package.

[Rich-Harris]

The bug isn't in esrap, it's in svelte — we're handing esrap a malformed AST. Working on it

[l3ackslash0]

Hi same problem here.
Does anyone have a workaround for this ?

[webJose]

@l3ackslash0 Read the entire thread.

[l3ackslash0]

Sorry @webJose , Read the thread a bit too fast :)

[webJose]

@l3ackslash0 no worries. It happens a lot to me. I was not nagging on you or anything. Just answering the question, which was a good thing as I was about to type a message to subscribe, as I'm impacted by this.