Cannot read properties of undefined (reading 'startsWith') #1053

360matt · 2024-12-17T22:27:09Z

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:

Create a new Sveltekit project, with typescript
Install deps and run dev
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

The text was updated successfully, but these errors were encountered:

andreiciobanica · 2024-12-17T22:31:42Z

+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 · 2024-12-17T22:36:47Z

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

dominikg · 2024-12-17T22:49:12Z

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

JReinhold · 2024-12-17T23:05:23Z

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 · 2024-12-17T23:31:14Z

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 · 2024-12-17T23:38:09Z

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

l3ackslash0 · 2024-12-18T00:14:47Z

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

webJose · 2024-12-18T00:15:27Z

@l3ackslash0 Read the entire thread.

l3ackslash0 · 2024-12-18T00:18:55Z

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

webJose · 2024-12-18T00:20:31Z

@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.

midirhee12 · 2024-12-18T00:21:26Z

Confirmed on clean install as well. Even the smallest level of typing throws it off.

l3ackslash0 · 2024-12-18T00:22:48Z

@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.

No problem 👍 ;)

midirhee12 · 2024-12-18T00:32:54Z

Seems to be affected since v5.0.0

midirhee12 · 2024-12-18T00:35:19Z

Can someone provide the latest versions of svelte, sveltekit, vite, and such that do not reproduce these issues?

webJose · 2024-12-18T00:36:48Z

@midirhee12, read the thread. You'll find a simple workaround if you cannot wait for the fix.

midirhee12 · 2024-12-18T00:51:14Z

@webJose Running pnpm install esrap@1.2.0 on a clean install does not fix the issue. Is there something I'm missing here?

Also, instead of telling people to "read the thread", it would be better to link the actual comment of the thread which noted the workaround.

hyunbinseo · 2024-12-18T00:54:38Z

The workaround is stated above:

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

@midirhee12 Add the following to the package.json file.

{
  "pnpm": {
    "overrides": {
      "esrap": "~1.2.0"
    }
  }
}

About overrides:

Rich-Harris · 2024-12-18T01:23:05Z

fixed in 5.14.3

disconsented · 2024-12-18T02:52:48Z

This still seems to be happening, I've created a fresh project, added the 'svelte-awesome' package, adding it to +page.svelte like so

<script lang="ts">
	import Icon from 'svelte-awesome';
</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>
<Icon></Icon>

3:52:00 PM [vite] (ssr) Error when evaluating SSR module /src/routes/+page.svelte:
|- TypeError: Cannot read properties of undefined (reading 'startsWith')
    at couldBeFixedByCssPreprocessor (file:///home/disconsented/projects/bugtest/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:111:72)
    at enhanceCompileError (file:///home/disconsented/projects/bugtest/node_modules/@sveltejs/vite-plugin-svelte/src/utils/error.js:126:6)
    at compileSvelte (file:///home/disconsented/projects/bugtest/node_modules/@sveltejs/vite-plugin-svelte/src/utils/compile.js:148:4)
    at async TransformPluginContext.transform (file:///home/disconsented/projects/bugtest/node_modules/@sveltejs/vite-plugin-svelte/src/index.js:164:20)
    at async EnvironmentPluginContainer.transform (file:///home/disconsented/projects/bugtest/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18)
    at async loadAndTransform (file:///home/disconsented/projects/bugtest/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27)

Rich-Harris · 2024-12-18T02:56:08Z

Please don't comment on closed issues, it's easy for updates to get missed

Rich-Harris · 2024-12-18T02:58:52Z

opened a fresh issue on sveltejs/svelte sveltejs/svelte#14743

360matt added bug Something isn't working triage Awaiting triage by a project member labels Dec 17, 2024

360matt changed the title ~~Error on use Typescript type~~ Cannot read properties of undefined (reading 'startsWith') Dec 17, 2024

360matt mentioned this issue Dec 17, 2024

Typing $props makes Vite crash sveltejs/svelte#14741

Closed

frederichoule mentioned this issue Dec 17, 2024

add typescript support sveltejs/esrap#13

Merged

3 tasks

ronny1982 mentioned this issue Dec 18, 2024

Re-enable svelte ➔ esrap dependency manga-download/haruneko#939

Closed

Rich-Harris closed this as completed Dec 18, 2024

Rich-Harris mentioned this issue Dec 18, 2024

TypeScript nodes still causing code generation failures sveltejs/svelte#14743

Closed

MattPhantastic mentioned this issue Dec 18, 2024

Hooks stopped working after upgrading sveltejs/svelte#14747

Closed

360matt mentioned this issue Dec 18, 2024

Type Error on new Vite projects with svelte-ts project #1055

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot read properties of undefined (reading 'startsWith') #1053

Cannot read properties of undefined (reading 'startsWith') #1053

360matt commented Dec 17, 2024 •

edited

Loading

andreiciobanica commented Dec 17, 2024 •

edited

Loading

ynot729 commented Dec 17, 2024

dominikg commented Dec 17, 2024

JReinhold commented Dec 17, 2024

frederichoule commented Dec 17, 2024

Rich-Harris commented Dec 17, 2024

l3ackslash0 commented Dec 18, 2024

webJose commented Dec 18, 2024

l3ackslash0 commented Dec 18, 2024

webJose commented Dec 18, 2024

midirhee12 commented Dec 18, 2024

l3ackslash0 commented Dec 18, 2024

midirhee12 commented Dec 18, 2024

midirhee12 commented Dec 18, 2024 •

edited

Loading

webJose commented Dec 18, 2024

midirhee12 commented Dec 18, 2024

hyunbinseo commented Dec 18, 2024 •

edited

Loading

Rich-Harris commented Dec 18, 2024

disconsented commented Dec 18, 2024

Rich-Harris commented Dec 18, 2024

Rich-Harris commented Dec 18, 2024

Cannot read properties of undefined (reading 'startsWith') #1053

Cannot read properties of undefined (reading 'startsWith') #1053

Comments

360matt commented Dec 17, 2024 • edited Loading

Describe the bug

Reproduction URL

Reproduction

Logs

System Info

andreiciobanica commented Dec 17, 2024 • edited Loading

ynot729 commented Dec 17, 2024

dominikg commented Dec 17, 2024

JReinhold commented Dec 17, 2024

frederichoule commented Dec 17, 2024

Rich-Harris commented Dec 17, 2024

l3ackslash0 commented Dec 18, 2024

webJose commented Dec 18, 2024

l3ackslash0 commented Dec 18, 2024

webJose commented Dec 18, 2024

midirhee12 commented Dec 18, 2024

l3ackslash0 commented Dec 18, 2024

midirhee12 commented Dec 18, 2024

midirhee12 commented Dec 18, 2024 • edited Loading

webJose commented Dec 18, 2024

midirhee12 commented Dec 18, 2024

hyunbinseo commented Dec 18, 2024 • edited Loading

Rich-Harris commented Dec 18, 2024

disconsented commented Dec 18, 2024

Rich-Harris commented Dec 18, 2024

Rich-Harris commented Dec 18, 2024

360matt commented Dec 17, 2024 •

edited

Loading

andreiciobanica commented Dec 17, 2024 •

edited

Loading

midirhee12 commented Dec 18, 2024 •

edited

Loading

hyunbinseo commented Dec 18, 2024 •

edited

Loading