导入TypeScript接口遇Uncaught SyntaxError，已导出却报错（Vite）

问题回顾 #

报错信息：

Uncaught SyntaxError: The requested module '/src/libs/settings/settingsType.ts' does not provide an export named 'SettingsInterface' (at index.ts:1:9)

settingsType.ts中的代码：

interface SettingsInterface {
    personalization?: {
        darkMode: boolean
    }
}

export {SettingsInterface}

index.ts中的导入语句：

import {SettingsInterface} from "./settingsType.js"

两个文件位于同一目录，以下是可能的原因和解决办法：

1. 导入文件后缀错误 #

你在导入时使用了.js后缀，但源文件是.ts格式。Vite在处理TypeScript文件时，需要匹配正确的源文件后缀，或者省略后缀让Vite自动解析。

修改导入语句为以下任意一种：

// 省略后缀（推荐）
import {SettingsInterface} from "./settingsType"

// 或者使用.ts后缀
import {SettingsInterface} from "./settingsType.ts"

如果坚持使用.js后缀，Vite会去寻找编译后的JavaScript文件，但在开发模式下该文件通常还未生成，因此会导致路径匹配失败。

2. 类型导入未明确声明 #

TypeScript接口属于类型信息，编译后会被完全擦除，运行时不存在对应的导出实体。直接使用普通导入语句会让Vite在运行时尝试查找该导出，从而报错。

解决方法是使用import type明确声明这是类型导入：

import type {SettingsInterface} from "./settingsType"

同时确保你的tsconfig.json配置正确，让TypeScript和Vite能正确识别类型导入：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler",
    "target": "ESNext",
    "strict": true
  }
}

3. 清除Vite缓存 #

Vite的开发缓存可能导致旧的编译结果残留，引发异常。可以删除项目根目录下的.vite缓存文件夹，然后重启开发服务器。

4. 检查Vite配置 #

确保你的vite.config.ts没有禁用TypeScript处理逻辑，Vite默认支持TypeScript，除非你手动添加了阻止TS解析的配置。

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