使用Live Server加载TS生成的JS文件出现NS_ERROR_CORRUPTED_CONTENT错误

背景 #

用原生TypeScript、HTML和CSS搭建简易银行网站，后续计划接入Plaid API测试，当前通过VS Code Live Server在本地调试项目结构。

项目结构 #

front-end/
├── dist/
│   ├── main.js
│   ├── login/
│   │   └── login.js
│   ├── dashboard/
│   │   └── dashboard.js
│   └── utils/
│       └── app.js
├── public/
│   ├── index.html
│   ├── login.html
│   └── dashboard.html
├── src/
│   ├── login/
│   │   └── login.ts
│   ├── dashboard/
│   │   └── dashboard.ts
│   └── utils/
│       └── app.ts
└── style/
    └── styles.css

错误现象 #

在dashboard.js模块加载app.js时触发NS_ERROR_CORRUPTED_CONTENT错误，控制台输出：

GET http://127.0.0.1:5500/front-end/dist/utils/app NS_ERROR_CORRUPTED_CONTENT

已知情况 #

• app.js被错误标记为text/html MIME类型，而非正确的application/javascript
• 所有文件路径均正确，VS Code中可通过Ctrl+Click跳转至对应模块
• 已执行清除缓存、重启服务器、重新编译TS文件等操作

相关代码 #

dashboard.js #

import { fetchBalance, updateBalanceDisplay } from '../utils/app';

export default async function initDashboard() {
    const balance = await fetchBalance();
    updateBalanceDisplay(balance);
}

app.js（存在语法问题） #

export function fetchBalance() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(1250.50);
        }, 1000); // 模拟网络延迟
    });
}

// 此处包含TypeScript类型注解，属于非法JavaScript语法
export function updateBalanceDisplay(balance: number) {
    const balanceElement = document.getElementById('balance');
    if (balanceElement) {
        balanceElement.textContent = `$${balance.toFixed(2)}`;
    }
}

main.js（路由） #

function handleRouting() {
    const path = window.location.pathname;
    if (path.includes('login.html')) {
        import('./login/login').then(module => {
            module.default();
        });
    } else if (path.includes('dashboard.html')) {
        import('./dashboard/dashboard').then(module => {
            module.default();
        }).catch(error => {
            console.error("Error loading dashboard module:", error);
        });
    }
}
handleRouting();

核心问题 #

1. 为何app.js会被以text/html MIME类型返回？
2. 如何解决NS_ERROR_CORRUPTED_CONTENT错误，让fetchBalance的数值正常显示？

已尝试操作 #

• 验证文件路径，确认相对于dist文件夹的路径无误
• 清除浏览器缓存并强制刷新页面
• 在VS Code Live Server设置中禁用缓存
• 直接在浏览器中加载app.js文件，仍出现相同错误

解决方案 #

1. 修复app.js中的TypeScript语法残留 #

编译后的app.js中存在TS专属的类型注解balance: number，这会导致Live Server无法正确识别文件类型， fallback返回HTML页面。

• 打开dist/utils/app.js，将updateBalanceDisplay(balance: number)修改为updateBalanceDisplay(balance)
• 重新运行tsc编译TS文件，确保所有编译产物都是标准JavaScript语法

2. 补全ES模块导入的.js后缀 #

浏览器加载ES模块时需要明确的文件后缀，缺失后缀会导致服务器无法正确定位文件，返回错误类型。

• 修改dashboard.js的导入语句：

  import { fetchBalance, updateBalanceDisplay } from '../utils/app.js';
  

• 修改main.js中的动态导入：

  // 登录模块导入
  import('./login/login.js').then(module => {
      module.default();
  });
  // 仪表盘模块导入
  import('./dashboard/dashboard.js').then(module => {
      module.default();
  })
  

3. 修正Live Server根目录设置 #

如果VS Code工作区不是front-end文件夹，Live Server的根目录可能错位，导致路径解析错误。

• 打开VS Code设置，搜索Live Server: Root，设置为${workspaceFolder}/front-end
• 重启Live Server后重新访问页面

4. 验证文件完整性 #

确认dist/utils/app.js文件存在且内容正常，若文件损坏则重新运行tsc编译覆盖该文件。

验证步骤 #

修改完成后刷新浏览器，打开开发者工具网络面板：

• 确认app.js请求状态码为200
• 确认响应头Content-Type为application/javascript
• 查看控制台是否无错误，同时检查页面balance元素是否显示$1250.50

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