使用esbuild构建Electron前端React TS代码时遇React未定义错误

问题原因 #

这个错误是因为JSX语法编译时依赖React对象，但代码或打包配置未正确引入React，导致运行时找不到全局的React变量。

解决方案 #

1. 确认React依赖已安装 #

先确保项目中已安装react和react-dom：

npm install react react-dom --save

2. 处理JSX的React导入 #

根据React版本选择对应方式：

• React 17及以上：支持自动导入React，无需在每个JSX文件手动添加导入，但需配置esbuild开启该特性。
• React 16及以下：必须在所有使用JSX的文件（比如app.tsx）顶部手动导入React：

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import App from './App';
  
  const root = createRoot(document.getElementById('root')!);
  export const renderApp = () => root.render(<App />);
  

3. 修改esbuild打包配置 #

在构建脚本中添加JSX相关配置，确保esbuild正确处理React依赖：

(async () => {
  await esbuild.build({
    entryPoints: ["dist/frontend/index.ts"],
    bundle: true,
    outfile: "dist/frontend/index.js",
    // React 17+ 推荐配置，自动处理React导入
    jsx: 'react-jsx',
    // 若使用React 16及以下，改用以下配置自动注入React导入
    // jsx: 'react',
    // jsxInject: "import React from 'react';",
    plugins: [
      esbuildPluginTsc({
        // force: true,
      }),
    ],
  });
})().then((d) => {
  console.log("built", d);
});

4. 检查tsconfig.json配置 #

确保tsconfig.json中的jsx选项与esbuild配置匹配：

{
  "compilerOptions": {
    // React 17+ 用这个
    "jsx": "react-jsx",
    // React 16及以下用这个
    // "jsx": "react",
    // 其他必要配置...
  }
}

5. 验证打包结果 #

重新执行构建脚本，启动Electron应用，确认错误是否消失。

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