Electron Forge集成React时HTML渲染失败问题求助

数据老陈

2026-7-1

Electron Forge集成React+TypeScript时JSX编译错误解决

问题背景

按照官方指南搭建Electron Forge+React+TypeScript项目，运行npm install时出现JSX解析错误，例如root.render(<h2>Hello from React!</h2>)被错误解析为root.render(Hello, from, React < /h2>););，触发未终止正则表达式、缺少逗号等TypeScript编译错误。

核心代码

index.html

<body>
    <div id="root"></div>
  </body>
</html>

renderer.ts

const rootElement = document.getElementById("root")
const root = createRoot(rootElement)
root.render(<h2>Hello from React!</h2>)

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "allowJs": true,
    "module": "commonjs",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "jsx": "react-jsx",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": ["src/**/*"]
}

解决步骤

重命名渲染器文件后缀
将renderer.ts改为renderer.tsx。TypeScript默认仅对.tsx后缀的文件启用JSX语法解析，.ts文件中的JSX会被当作普通TS代码处理，直接引发语法错误。
补全依赖包
确保安装了React核心库及类型定义，执行：
```
npm install react react-dom @types/react @types/react-dom --save
```
缺失依赖会导致TypeScript无法识别JSX相关语法。

检查Webpack配置（若使用webpack模板）
确认webpack.renderer.config.js中正确配置了TSX文件的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        loader: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
}

该配置确保Webpack能识别并编译TSX文件。