Can't use Typescript in <script> inside .svelte

[jlkiri]

Describe the bug

Build (and VSCode check) fails when TS is used in <script>. You can see the unexpected token error on the screenshot. Build fails with the same unexpected token error. Not quite sure why. I followed all the recommendations from svelte-preprocess docs.

Logs
Please include browser console and server logs around the time this bug occurred.

To Reproduce

1. Create a fresh sapper project with degit
2. Follow the instructions from here
3. Add lang="typescript" to any <script>.
4. Inside that script, add let a: number = 1

tsconfig.json:

{
  "include": ["src/**/*"],
  "exclude": ["node_modules/*"],
  "compilerOptions": {
    "target": "es2017",
    "types": ["svelte", "node"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "lib": ["dom.iterable", "es5", "es6", "esnext", "dom"],
    "downlevelIteration": true
  }
}

Expected behavior
Build doesn't fail. VSCode shows no errors.

Information about your Sapper Installation:

• WSL2 Ubuntu 18.04 (Windows 10)

"sapper": "^0.27.0",
"svelte": "^3.0.0",

• Rollup

Severity
Moderate

[halfnelson]

Could you please add your svelte.config.js too

[jlkiri]

Sure

import sveltePreprocess from 'svelte-preprocess';

module.exports = {
  preprocess: sveltePreprocess(),
};

[benmccann]

You'd want to file this issue in https://github.com/sveltejs/language-tools for VS Code support or ask in the language-tools Discord channel. This isn't related to Sapper at all as far as I can see

There is one known issue with Sapper and TypeScript, which is that you can't use TypeScript in a svelte template that has a preload function. There's a PR pending to fix that. You can track the progress of Sapper TypeScript support in #760

[jlkiri]

But it's not just VSCode issue, my build fails regardless of whether there is a preload or not.
Here is a stack:

jlkiri@LAPTOP-JFBR63AR:~/dev/sapper-bug-1$ npm run dev

> TODO@0.0.1 dev /home/jlkiri/dev/sapper-bug-1
> sapper dev

✗ client
/home/jlkiri/dev/sapper-bug-1/src/routes/index.svelte
Unexpected token
1: <script lang="typescript">
2: let a: number = 1;
        ^
3: </script>
4:
✗ server
/home/jlkiri/dev/sapper-bug-1/src/routes/index.svelte
Unexpected token
1: <script lang="typescript">
2: let a: number = 1;
        ^
3: </script>
4:
internal/modules/cjs/loader.js:626
    throw err;
    ^

Error: Cannot find module '/home/jlkiri/dev/sapper-bug-1/__sapper__/dev/server/server.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Function.Module.runMain (internal/modules/cjs/loader.js:837:10)
    at internal/main/run_main_module.js:17:11 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}
> Server crashed
✔ service worker (860ms)

Here's a reproduction repo: https://github.com/jlkiri/sapper-ts-bug-repro
File where TS is used: https://github.com/jlkiri/sapper-ts-bug-repro/blob/master/src/routes/index.svelte

[benmccann]

TypeScript should work in this case. Something's probably setup wrong in your project. Here's an example project you can take a look at: https://github.com/babichjacob/sapper-typescript-graphql-template

[benmccann]

It might be a problem that you don't have any .ts files in your project. Try renaming client.js to client.ts

[benmccann]

Also, Sapper doesn't output TypeScript errors unless you're using the code from master where that's been fixed. Try using my fork to get better error messages: #760 (comment)

[Spenhouet]

I came here with an issue using storybooks and typescript. For me this was the solution: storybookjs/storybook#12754 (comment)