Firefox中TypeScript模块加载失败：无法加载flashcard模块

架构老林

2026-7-6

TypeScript模块导入在Firefox中加载失败的排查与解决

问题描述

在TypeScript代码中使用导入语句时，Firefox报错：Loading failed for the module with source flashcard，导入代码如下：

import Flashcard from "./flashcard"

对应的flashcard文件代码：

export default class FlashCard {
    front: string;
    back: string;
    
    constructor(front:string, back:string)
    {
        this.front = front;
        this.back = back;
    }
}

同时浏览器Network面板内容完全为空。

解决方法

添加文件扩展名
浏览器加载ES模块时需要明确指定文件扩展名，TypeScript编译后会生成.js文件，因此导入时必须加上.js后缀：
```
import Flashcard from "./flashcard.js"
```
省略扩展名时，浏览器会尝试请求无后缀的路径，导致资源无法找到，这也是Network面板无请求记录的原因之一。
确认TypeScript编译结果
检查.ts文件是否已编译为.js文件，且编译后的文件路径与导入路径匹配。可通过tsc命令手动编译，或配置tsconfig.json确保编译输出位置正确，例如：
```
{
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }
}
```
使用本地服务器运行项目
直接通过file://协议打开本地HTML文件时，浏览器的安全限制会导致ES模块加载失败，且Network面板无法正常捕获请求。需使用本地服务器（如http-server、live-server）启动项目，通过http://localhost访问页面。
检查文件名大小写
若系统文件区分大小写（如Linux/macOS），需确保导入语句中的文件名与实际文件名完全一致（包括大小写），避免因大小写不匹配导致资源找不到。