sveltejs/svelte-loader

Svelte 5 + Typescript: Unexpected token in svelte.ts files

philippone opened this issue · 1 comments

I want to use Svelte 5 with Typescript but got the following error when I try to use .svelte.ts files:

ERROR in ./src/test.svelte.ts
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: SyntaxError: SyntaxError: Unexpected token (2:10)
    at module.exports (/Users/philipp.schardt/workspace/test/template-webpack/node_modules/svelte-loader/index.js:107:13)
 @ ./src/App.svelte 7:0-42 33:18-27
 @ ./src/main.ts 2:0-31 4:18-21

I'm using the webpack config described in the readme with the adaptions for svelte 5.

It seems that svelte-loader cannot handle typescript syntax.
When I swap 'svelte-loader' and 'ts-loader' for svelte.tsfiles then other errors appear.

Reproduction: https://github.com/philippone/template-webpack
(Adaption ob template-webpack repo with typescript and typescript)

Turned out the readme wasn't quite right:

  • ts-loader needs to come after svelte-loader, as webpack runs them in backwards order
  • loader config for .ts files should exclude .svelte.ts file
  • tsconfig.json target config should be ESNext to not downlevel for example class features which would result in a weird error ("$state not allowed here")