TypeScript 报错：exports is not defined

问题描述：

开发过程中浏览器报错：Uncaught ReferenceError: exports is not defined at index.js:2:23

这个错误出现在使用TypeScript开发的前端项目中，当在浏览器中运行时出现。

分析原因：

核心问题：模块系统不匹配

问题的根源在于TypeScript配置与浏览器执行环境的模块系统不匹配。

详细技术分析

1. TypeScript的"nodenext"配置

当我们在tsconfig.json中使用：

{
  "compilerOptions": {
    "module": "nodenext"
  }
}

• "nodenext"本质是ES Modules：TypeScript的"nodenext"策略是为了支持Node.js的ES Modules
• 生成ES Modules代码：即使配置为"nodenext"，TypeScript也会生成符合ES Modules标准的JavaScript代码
• 不是CommonJS ：不会生成module.exports或require这样的CommonJS语法

2. 浏览器的执行机制

<!-- 错误的方式 -->
<script type="text/javascript" src="./index.js"></script>

<!-- 正确的方式 -->
<script type="module" src="./index.js"></script>

• type="text/javascript"：以传统脚本方式执行，不支持模块特性
• type="module" ：以ES Modules方式执行，支持import/export语法

3. 错误的根本原因

当TypeScript使用"nodenext"编译时：

1. 生成ES Modules格式的JavaScript代码
2. 原始HTML使用传统<script>标签
3. 浏览器以传统方式执行，无法识别模块语法
4. 导致"exports is not defined"错误

为什么会出现"exports is not defined"？

虽然TypeScript生成的是ES Modules代码，但浏览器在传统执行模式下：

• 期望的是传统脚本
• 无法识别ES Modules的export语法
• 报错"exports is not defined"是因为浏览器在寻找不存在的CommonJS模块系统

解决办法：

首先，修改HTML执行方式

将HTML中的<script>标签改为：

<script type="module" src="./index.js"></script>

其次，修改TypeScript配置

将tsconfig.json改为：

{
  "compilerOptions": {
    "module": "ES6",
    "target": "ES6"
  }
}

问题解决，浏览器不报错了！