Svelte/Typescript error : "unexpected token" during type declaration

Question

So I have a Svelte application with TypeScript enabled but now I am having an issue for running it :

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src\api.ts (4:7)
2:
3: export default class API {
4:     url:string;
          ^
5:

I don't understand because the app was working before, and suddenly raised this error. It seems that some versions related to TypeScript for Svelte was changed:

{
  "name": "...",
  "version": "...",
  "private": ...,
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear",
    "validate": "svelte-check",
    "check": "svelte-check --tsconfig ./tsconfig.json"  /* + ADDED */
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "...",
    "@rollup/plugin-json": "...",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-typescript": "^8.0.0",
    /* @smui/... stuffs */
    "@tsconfig/svelte": "^2.0.0",     /* ^1.0.0 -> ^2.0.0 */
    "rollup": "^2.67.0",
    "rollup-plugin-css-only": "^3.1.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-svelte": "^7.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "svelte": "^3.46.3",
    "svelte-check": "^2.0.0",         /* ^1.0.0 -> ^2.0.0 */
    "svelte-preprocess": "^4.0.0",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.2",
    "svelte-material-ui": "..."
  }
}
/* Note: I replaced some unrelated properties/version by '...'. */

Of course executing npm install didn't help. And if I just remove the :string, it will throw the same error for all other :<type> in the code.

Note that the file is named .ts and that VSCode doesn't detect any syntax error in those files.

Config files (edit)

/* tsconfig.json */
{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

/* rollup.config.js */
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';

const production = !process.env.ROLLUP_WATCH;

function serve() {
    let server;

    function toExit() {
        if (server) server.kill(0);
    }

    return {
        writeBundle() {
            if (server) return;
            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
                stdio: ['ignore', 'inherit', 'inherit'],
                shell: true
            });

            process.on('SIGTERM', toExit);
            process.on('exit', toExit);
        }
    };
}

export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js'
    },
    plugins: [
        svelte({
            preprocess: sveltePreprocess({ sourceMap: !production }),
            compilerOptions: {
                dev: !production
            }
        }),
        css({ output: 'bundle.css' }),
        resolve({
            browser: true,
            dedupe: ['svelte']
        }),
        commonjs(),
        typescript({
            sourceMap: !production,
            inlineSources: !production
        }),
        json(),
        !production && serve(),
        !production && livereload('public'),
        production && terser()
    ],
    watch: {
        clearScreen: false
    }
};

No file svelte.config.js

Answer 1

Having setup my project from the latest svelte template with Typescript enabled, faced a similar "unexpected token" complaint when trying to import types into .svelte files, not in the code editor but the server.

Fix was to explicitly set the preprocess option in svelte.config.js to vitePreprocess(). This was unexpected since the svelte docs (currently) state that this is included by default if Typescript is enabled during setup! https://kit.svelte.dev/docs/integrations#preprocessors

import { vitePreprocess } from '@sveltejs/kit/vite';
 
export default {
  preprocess: [vitePreprocess()]
};