为何App.tsx的export default App编译为exports.default=App？如何解决浏览器报错

核心原因 #

TypeScript默认会把代码编译成Node.js专属的CommonJS模块语法，也就是把export default App转成exports.default = App，但浏览器只原生支持ES模块的import/export语法，所以才会抛出这个引用错误。

具体解决步骤 #

• 修改tsconfig.json配置
  打开项目根目录的tsconfig.json，在compilerOptions里调整模块相关配置：

  {
    "compilerOptions": {
      "module": "ESNext", // 可选ES6/ES2020，只要是ES系列模块规范就行
      "moduleResolution": "NodeNext",
      "target": "ESNext", // 目标JS版本尽量选支持ES模块的
      "esModuleInterop": true,
      "strict": true
    }
  }
  

  关键是把module设为ES系列选项，这样TS就会把代码编译成浏览器能识别的ES模块语法，而不是CommonJS的exports格式。

• 适配打包工具配置

  • 用Vite的话：默认已经支持ES模块，只要tsconfig配置正确，不需要额外修改。
  • 用Create React App（CRA）的话：CRA自带的Webpack会自动处理模块，但别把tsconfig里的module改成CommonJS；如果是自定义Webpack配置，要确保output.module设为true，开启ES模块打包模式。

• 检查HTML引入方式
  如果是直接引入编译后的JS文件，一定要给<script>标签加上type="module"属性：

  <script type="module" src="./dist/App.js"></script>
  

  这样浏览器才会把该文件当作ES模块解析，不会报错。

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