TypeScript+React+Electron导入语句外模块报错配置问题

核心矛盾梳理 #

• 开启Node原生ESM模式（配置package.json的"type": "module"）会导致ts-node无法识别.ts文件扩展，抛出Unknown file extension ".ts"错误
• CRA启动开发服务时会自动覆写根目录tsconfig.json的module字段为esnext，手动修改为CommonJS的配置会被自动还原
• 未做模块转译适配直接运行TS启动脚本，会触发Cannot use import statement outside a module运行时错误

分步配置操作 #

1. 保持根目录package.json默认状态 #

不要添加"type": "module"配置项，规避Node原生ESM模式对TS文件的识别异常，同时不影响CRA的前端编译流程。

2. 新增独立的Electron侧TS配置文件 #

在项目根目录新建tsconfig.electron.json，专门服务于Electron主进程、项目启动脚本，与CRA使用的默认tsconfig完全隔离，避免配置被自动覆写，配置内容如下：

{
  "compilerOptions": {
    "target": "ES2019",
    "module": "CommonJS",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "noEmit": true
  },
  "include": [
    "src/start.ts",
    "src/start-react.ts"
  ]
}

这份配置仅作用于ts-node运行Node脚本的场景，与CRA前端编译使用的根目录tsconfig.json互不干扰，即使CRA自动覆写根目录配置，也不会影响Electron侧的脚本运行。

3. 调整npm脚本的运行参数 #

将原有脚本做如下修改，显式指定ts-node加载独立的配置文件：

• 原electron-start脚本调整为："electron-start": "ts-node --project tsconfig.electron.json src/start-react.ts"
• 原electron脚本调整为："electron": "ts-node --project tsconfig.electron.json src/start.ts"

ts-node加载CommonJS配置后，会自动将TS中的import/export语法转译为Node兼容的模块格式，不会触发模块语法报错。

运行验证 #

配置完成后依次执行以下命令即可正常启动项目：

1. 启动React开发服务：npm run react-start
2. 触发Electron窗口自动拉起逻辑：npm run electron-start

整个流程完全保留CRA的前端编译能力，同时兼容Node/Electron侧的TypeScript脚本运行，不存在配置被自动覆写、模块语法不兼容的问题。

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