reactjstypescriptelectrontsxesbuild

getting React is not defined when building react ts code through esbuild for electron frontend

I am building an electron app for a project, where i am loading index.html in browserWindow, in that html i am downloading the script which is bundled via esbuild. The script is downloaded successfully but it throws error saying Uncaught ReferenceError: React is not defined. I am executing a js file to build.

(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);
});

and the index.ts file contains the following code: -

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

where renderApp is defined in an app.tsx file as :-

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

<App/> being a generic tsx functional component

Solution

  • The problem was somewhat simple and wierd, my react file had an import statements looking like these :-

    import * as react from "react";

    while the esbuild compiled the jsx to React.createElement(...), noticing that my imports declared 'react' with smallcase 'r' while the jsx was transpiled with React.createElement with uppercase 'R'.
    Fixing my imports to have a uppercase 'R' fixed the issue. Looks like esbuild doesn't look at the react imports while transpiling jsx.