Svelte组件导入JS/TS类的正确方法及default导入报错解决

云原生阿岚

2026-8-30

问题描述

现有SomeClass.ts文件内容如下：

class SomeClass {
  constructor () {
    console.log('created someclass')
  }
}

export default SomeClass

该文件编译后生成SomeClass.js，编译产物代码如下：

'use strict'
exports.__esModule = true
const SomeClass = /** @class */ (function () {
  function SomeClass () {
    console.log('created someclass')
  }
  return SomeClass
}())
exports.default = SomeClass

在App.svelte的script标签中按如下方式导入该类：

<script>
  import SomeClass from "./SomeClass";

  const instance = new SomeClass();
</script>

运行应用时抛出报错：
Uncaught SyntaxError: import not found: default
报错指向构建生成的代码行：import SomeClass from "/src/SomeClass.js?t=1655451078055";

备注：如果直接在SomeClass.js中使用标准ES6语法编写类并通过export default MyClass导出可以正常运行，但这种方式无法发挥TypeScript的作用。

解决方案

按以下步骤操作即可修复问题：

安装svelte-preprocess依赖：
```
npm install -D svelte-preprocess
```

按如下方式更新vite.config.js配置：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import sveltePreprocess from 'svelte-preprocess' // 新增引入

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte({
    preprocess: sveltePreprocess() // 新增预处理配置
  })]
})