Home > Software design >  Updating React and Electron and getting "Uncaught ReferenceError: global is not defined"
Updating React and Electron and getting "Uncaught ReferenceError: global is not defined"

Time:10-22

I have an Electron React app that I haven't updated in a couple years, originally using these packages:

"@rescripts/cli": "^0.0.13",
"@rescripts/rescript-env": "^0.0.11",
"electron": "^7.1.10",
"electron-builder": "^22.3.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0",

And now I want it to use:

"@rescripts/cli": "^0.0.13",
"@rescripts/rescript-env": "^0.0.11",
"electron": "^21.1.1",
"electron-builder": "^23.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",

When I run my app, the Electron window/menu/etc loads perfectly, but the actual React part of the application doesn't. The code for the React application itself isn't really relevant at this point, because it won't even render a basic "hello world".

I've updated (or commented out) pretty much all of the deprecated features, but I think the webpack part of rescripts/Create React App is causing the error, Uncaught ReferenceError: global is not defined.

The global variable is nowhere in my code at this point, but my .webpack.config.js has:

module.exports = config => {
  config.target = "electron-renderer";
  return config;
};

and my .rescriptsrc.js has:

module.exports = [require.resolve("./.webpack.config.js")];

And I think these are the culprit, because when I click into the error, it points to compiled webpack files that are not actually in my codebase.

Is there something I missed on the webpack/rescripts side that I need to update? Searching amongst the documentation hasn't been particularly helpful.

CodePudding user response:

I think your issue is the rescripts package. The repository is archived and it doesn't support react-scripts v5, only up until v4.*.

If you really want to use v5, an option I was considering when I faced this issue was replacing rescripts with craco. Their react-scripts v5 support is still a work in progress, but for the simple webconfig patching I needed – same thing as you, actually – it worked.

CodePudding user response:

Turns out the contextIsolation breaking change in Electron 12 broke the build (documentation here).

By changing the webPreferences in my main process file to set contextIsolation to false, like the below, everything ran again:

webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
}

I do think that @gfnoueira is correct in that I need to take out rescripts ultimately as it isn't supported anymore, but to get the app to a "running" state, this did the trick!

Special thanks to John Lindquist for pointing out this deprecation!

  • Related