Svelte启用TypeScript时类型声明报unexpected token错误

搭建了启用TypeScript支持的Svelte应用，近期运行项目时抛出如下报错：

[!] 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:

该应用此前可正常运行，突然触发该错误，初步怀疑是Svelte相关TypeScript依赖版本变动导致。

已排查情况 #

• 已执行npm install重新安装依赖，问题未解决
• 移除代码中url:string的类型标注后，其余所有:<type>类型声明位置都会抛出相同错误
• 报错文件后缀为.ts，VSCode未检测到这些文件存在任何语法错误
• 项目目录下不存在svelte.config.js文件

相关配置 #

package.json #

{
  "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"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "...",
    "@rollup/plugin-json": "...",
    "@rollup/plugin-node-resolve": "^13.1.3",
    "@rollup/plugin-typescript": "^8.0.0",
    "@tsconfig/svelte": "^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",
    "svelte-preprocess": "^4.0.0",
    "tslib": "^2.0.0",
    "typescript": "^4.0.0"
  },
  "dependencies": {
    "sirv-cli": "^2.0.2",
    "svelte-material-ui": "..."
  }
}

注：无关属性、版本号已用...替换；本次变动包括@tsconfig/svelte从^1.0.0升级到^2.0.0、svelte-check从^1.0.0升级到^2.0.0，check脚本为后续新增。

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
    }
};

报错本质是Rollup的TypeScript插件未正确处理.ts文件，所有TS类型语法被直接当成普通JS解析，才会在类型标注位置抛出「意外token」错误。
问题根源是升级@tsconfig/svelte到2.x版本导致的兼容问题：2.x版本调整了默认TS编译规则，同时@rollup/plugin-typescript在该配置下不会自动读取项目根目录的tsconfig.json，默认按纯JS规则解析所有文件，和前期判断的依赖版本变动原因一致。
按以下步骤修复即可：

1. 修改rollup.config.js中的typescript插件配置，显式指定tsconfig文件路径：

typescript({
    sourceMap: !production,
    inlineSources: !production,
    tsconfig: "./tsconfig.json" // 新增该行配置
})

2. 修改tsconfig.json，补充compilerOptions下的module配置，适配Rollup的ESM解析规则：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "module": "ESNext"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

3. 删除node_modules目录和对应包管理器的lock文件（package-lock.json/yarn.lock等），重新执行npm install安装依赖后重启dev服务。
   如果上述操作后仍有报错，将@rollup/plugin-typescript版本锁定到8.3.0及以上、typescript版本锁定到4.5及以上即可，旧版本插件和新版@tsconfig/svelte存在已知兼容问题。

内容的提问来源于stack exchange，提问作者vinalti