Unexpected token in svelte v4.0.4 using TS with examples given in docs

[abraithwaite]

Describe the bug

Re-opening #8914 since it's not just the REPL or playground and I wasn't given a chance to respond. This is happening in a normal environment too... The reproduction is an example which fails to compile.

I think this should be a valid .svelte component, correct?

<script lang="ts">
  let name: string = "hah";
</script>

<h1>
	Hello {name}!
</h1>

Instead I get unexpected token.

https://svelte.dev/docs/typescript

Reproduction

https://gitlab.com/abraithwaite/svblog/-/blob/main/src/lib/components/Post.svelte

https://svelte.dev/repl/6af52aae1523468eacaf035b55d629ab?version=4.0.4

Logs

error when starting dev server:
Error: Unexpected token (2:17)
1: <script lang="ts">
2:   export let title: string;
                     ^
3:   export let date: Date;
4: </script>
        at /Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/src/lib/components/Post.svelte
    at process_layouts (/Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/node_modules/mdsvex/dist/main.cjs.js:25910:10)
    at mdsvex (/Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/node_modules/mdsvex/dist/main.cjs.js:26027:12)
    at file:///Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/svelte.config.js?ts=1688535493940:15:3
    at ModuleJob.run (node:internal/modules/esm/module_job:192:25)
    at async DefaultModuleLoader.import (node:internal/modules/esm/loader:246:24)
    at async load_config (file:///Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/node_modules/@sveltejs/kit/src/core/config/index.js:70:17)
    at async sveltekit (file:///Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/node_modules/@sveltejs/kit/src/exports/vite/index.js:119:24)
    at async Promise.all (index 0)
    at async asyncFlatten (file:///Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:12623:16)
    at async resolveConfig (file:///Users/abraithwaite/Projects/gitlab.com/abraithwaite/svblog/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:64022:29)

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 279.23 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.3.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 114.1.52.129
    Safari: 16.5.1
  npmPackages:
    svelte: ^4.0.0 => 4.0.4

Severity

annoyance

[teobgeno]

I think the problem in you application is the mdsvex extension rather than svelte.I test it by removing the mdsvex call from the preprocess at your svelte.config.js file and there was no error during compile. I provide some links that may help you with this issue #485 #277

[dominikg]

mdsvex needs to come first in svelte4

[abraithwaite]

They claim to have updated to support Svelte 4:

https://github.com/pngwn/MDsveX/pull/520

I didn't see any breaking changes in the release notes they didn't address.

I also have an open issue there: https://github.com/pngwn/MDsveX/issues/526

I tracked it down to mdsvex calling svelte/compiler's parse function here, which is why I decided to open an issue here.

https://github.com/pngwn/MDsveX/blob/26591be63e088f57c78108553813ef18cc8ca5b1/packages/mdsvex/src/index.ts#L155-L159

Thank you for hearing me out and not closing outright. Please let me know if I can provide any more information or if the way they're calling parse in the above linked code looks funky, but it definitely looks to me like it's coming from Svelte and not because of an issue with mdsvex.

[abraithwaite]

Heya, just FYI @dummdidumm, I did update the preprocessor order and the issue still happens. I'm not going to open another ticket. Is there a better place to discuss this problem than github issues? I get the feeling that this is not a priority for the Svelte/Vercel team.

[dummdidumm]

Is the error still the same?

[abraithwaite]

It is, thank you. I pushed the updated config to the gitlab repo. Is there anything I could provide to help make debugging this easier?

[teobgeno]

I could be wrong but I think at https://github.com/pngwn/MDsveX/blob/26591be63e088f57c78108553813ef18cc8ca5b1/packages/mdsvex/src/index.ts#L153-L159 mdsvex is directly reading your file ( L153 ) from your svelte configuration file ./src/lib/components/Post.svelte and then pass it as a parameter at svelte parser (L156). The file is typescript and need to be preprocessed(convert TypeScript to plain JavaScript) before it can be parsed by svelte.

[dominikg]

as @teobgeno mentioned, mdsvex layouts do not support using typescript in them directly. see https://github.com/pngwn/MDsveX/issues/116 for a workaround using a small wrapper.

closing as unrelated to svelte