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
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.