通过 esbuild 为电子前端构建 React ts 代码时未定义获取 React

Question

我正在为一个项目构建一个电子应用程序，我在 browserWindow 中加载 index.html，在该 html 中我正在下载通过 esbuild 捆绑的脚本。脚本已成功下载，但抛出错误并提示

Uncaught ReferenceError: React is not defined

。我正在执行一个 js 文件来构建。

(async () => {
  await esbuild.build({
    entryPoints: ["dist/frontend/index.ts"],
    bundle: true,
    outfile: "dist/frontend/index.js",
    plugins: [
      esbuildPluginTsc({
        // force: true,
      }),
    ],
  });
})().then((d) => {
  console.log("built", d);
});

index.ts 文件包含以下代码：-

import { renderApp } from "./app";
renderApp();

其中

renderApp

在

app.tsx

文件中定义为：-

export const renderApp = () => root.render(<App />); 

<App/>

是通用 tsx 功能组件

Answer 1

问题有点简单和奇怪，我的反应文件有一个导入语句，看起来像这样：-

import * as react from "react";

当 esbuild 将 jsx 编译为

React.createElement(...)

时，注意到我的导入声明了带有小写“r”的“react”，而 jsx 则使用带有大写“R”的

React.createElement

进行了转译。
修复我的导入以使用大写“R”解决了该问题。看起来 esbuild 在转译 jsx 时不会查看 React 导入。