Electron + TypeScript 报错：exports is not defined 解决方法

问题场景 #

使用TypeScript编写的Electron应用，主进程通过index.ts启动，渲染进程代码main.ts通过index.html的script标签引入。执行npx tsc && node index.js后，Electron窗口控制台抛出Uncaught ReferenceError: exports is not defined错误。

核心原因 #

当前tsconfig.json将代码编译为CommonJS模块，但浏览器环境（包括Electron渲染进程通过普通script标签加载的脚本）默认不支持CommonJS的exports/require语法，导致解析失败。

解决方案 #

方案1：切换为ES模块（推荐，无需额外工具） #

调整TypeScript编译配置和HTML脚本标签，让渲染进程代码使用浏览器原生支持的ES模块：

1. 修改tsconfig.json：将module改为ESNext，添加moduleResolution配置：

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["DOM"], 
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true, 
    "skipLibCheck": true
  }
}

2. 更新渲染进程导入路径：ES模块要求完整文件后缀，修改main.ts：

import someFunction from "./someModule.js"; // 添加.js后缀

someFunction();

3. 修改HTML脚本标签：添加type="module"声明：

<script defer src="main.js" type="module"></script>

方案2：使用打包工具（适合复杂项目） #

对于规模较大的项目，推荐使用Vite、Webpack等打包工具，将渲染进程的TypeScript代码打包为浏览器可直接解析的单文件：

• 用Vite的话，可使用vite-plugin-electron插件，自动区分主进程和渲染进程的打包规则，无需手动调整模块语法。
• 打包后直接引入生成的文件，彻底避免模块语法兼容性问题。

方案3：改用Node.js require语法（不推荐，风格不一致） #

如果坚持使用CommonJS模块，可将渲染进程代码改为require语法：

// main.ts
const someFunction = require("./someModule").default;
someFunction();

此方法依赖Electron渲染进程的Node.js集成（已开启nodeIntegration: true），但会导致代码风格与ES模块不一致，长期维护性差。

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