Updating Electron issue: Uncaught ReferenceError: global is not defined

Question

I'm working on an Electron app with ReactJS + Bootstrap and Typescript, and as I tried to update my Electron version (11.5.0) to the current one ( 15.2.0 ) I stumbled upon this error message in the developer tools' console:

Ignore the warning since it was there before I updated Electron to a more recent version, the problem is that the app is completely blank and unusable. I tried googling and searching here in SO for the message but most posts and answers were related to Angular and a "polyfills.ts" file.

I also tried updating to a lower version (12.2.2) but it broke as well.

├── @types/electron-devtools-installer@2.2.0
├── electron-builder@22.13.1
├── electron-devtools-installer@3.2.0
├── electron-fetch@1.7.4
├── electron-rebuild@3.2.3
├── electron@12.2.2

This is my package.json :

{
  "name": "asdfasdf",
  "version": "1.0.0",
  "main": "./dist/main.js",
  "preload": "./dist/preload.js",
  "scripts": {
    "dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
    "dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.babel.js --mode development && electron .",
    "dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.babel.js --mode development",
    "build:electron": "NODE_ENV=production webpack --config webpack.electron.config.babel.js --mode production",
    "build:react": "NODE_ENV=production webpack --config webpack.react.config.babel.js --mode production",
    "build": "npm run build:electron && npm run build:react",
    "rebuild": "electron-rebuild -f -w serialport",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "lint": "eslint .",
    "format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
  },
  "keywords": [],
  "license": "MIT",
  "build": {
    "files": [
      "dist/",
      "node_modules/",
      "package.json"
    ],
    "productName": "asdfasdf",
    "appId": "com.example.app",
    "directories": {
      "output": "dist"
    }
  },
  "browser": {
    "[module-name]": false
  },
  "devDependencies": {
    "@babel/preset-env": "^7.15.8",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@babel/register": "^7.15.3",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/firmata": "^0.19.3",
    "@types/node": "^16.11.6",
    "@types/plotly.js": "^1.54.16",
    "@types/react-plotly.js": "^2.2.4",
    "@types/react-router-dom": "^5.3.2",
    "@types/regenerator-runtime": "^0.13.0",
    "dpdm": "^3.8.0",
    "electron": "^11.5.0",
    "electron-builder": "^22.13.1",
    "electron-devtools-installer": "^3.1.1",
    "electron-rebuild": "^3.2.3",
    "eslint": "^8.1.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "husky": "^7.0.4",
    "ify-loader": "^1.1.0",
    "lint-staged": "^11.2.6",
    "prettier": "^2.4.1",
    "react-router-dom": "^5.3.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  },
  "dependencies": {
    "@babel/core": "^7.15.8",
    "@serialport/bindings": "^9.2.4",
    "@types/johnny-five": "^1.3.1",
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "axios": "^0.24.0",
    "babel-loader": "^8.2.3",
    "bindings": "^1.5.0",
    "bootstrap": "^5.1.3",
    "concurrently": "^6.3.0",
    "core-js": "^3.19.0",
    "css-loader": "^6.5.0",
    "electron-fetch": "^1.7.4",
    "firmata": "^2.3.0",
    "ini": "^2.0.0",
    "johnny-five": "^2.1.0",
    "jquery": "^3.5.1",
    "node-gyp": "^8.3.0",
    "nodebots-interchange": "^2.1.3",
    "plotly.js": "^2.5.1",
    "react": "^17.0.1",
    "react-bootstrap": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-google-login": "^5.2.2",
    "react-icons": "^4.3.1",
    "react-plotly.js": "^2.5.1",
    "serialport": "^9.2.4",
    "style-loader": "^3.3.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run format"
    }
  },
  "lint-staged": {
    "*.+(js|jsx)": "eslint --fix",
    "*.+(json|css|md)": "prettier --write"
  }
}

I also have these two Webpack config files:

webpack.electron.config.babel.js

import { resolve as _resolve } from "path";

export const resolve = {
  extensions: [".tsx", ".ts", ".js"],
};
export const devtool = "source-map";
export const entry = {
  main: {
    import: "./electron/main.ts",
    dependOn: "preload",
  },
  preload: "./electron/preload.ts",
};
export const output = {
  path: _resolve(__dirname, "dist"),
  filename: "[name].js",
};
export const target = "electron-main";
export const module = {
  rules: [
    {
      test: /\.(js|ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
      },
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    },
  ],
};

And webpack.react.config.babel.js :

import { resolve as _resolve } from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";

export const resolve = {
  extensions: [".tsx", ".ts", ".js"],
  mainFields: ["main", "module", "browser"],
};
export const entry = "./src/App.tsx";
export const target = "electron-renderer";
export const devtool = "source-map";
export const module = {
  rules: [
    {
      test: /\.(js|ts|tsx)$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader",
      },
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"],
    },
    {
      test: /\.(png|jp(e*)g|svg|gif)$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "images/[hash]-[name].[ext]",
          },
        },
      ],
    },
  ],
};
export const devServer = {
  historyApiFallback: true,
  compress: true,
  hot: true,
  port: 4000,
  devMiddleware: {
    publicPath: "/",
  }
};
export const output = {
  path: _resolve(__dirname, "dist"),
  filename: "js/[name].js",
};
export const plugins = [new HtmlWebpackPlugin()];

I'm using the latest LTS version of Node (16.13.0) if that's of any help.

The code that's breaking is from a file which I didn't manually generate so I doubt it's of any use but here's jsonp chunk loading ( global is undefined ):

global["webpackHotUpdatebiomech"] = (chunkId, moreModules, runtime) => {
    for(var moduleId in moreModules) {
        if(__webpack_require__.o(moreModules, moduleId)) {
            currentUpdate[moduleId] = moreModules[moduleId];
            if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
        }
    }
    if(runtime) currentUpdateRuntime.push(runtime);
    if(waitingUpdateResolves[chunkId]) {
        waitingUpdateResolves[chunkId]();
        waitingUpdateResolves[chunkId] = undefined;
    }
};

Answer 1

Adding <script>var global = global || window;</script> <script>var global = global || window;</script> to your index.html file will resolve the issue. I tried to remove it and am getting the same error you are.

Answer 2

Don't use context isolation ( I agree with the Electron team's rationale for contextIsolation: true, IF you EVER plan to load 3rd party websites or even your own website that has 3rd party javascript running, as they could access your IPC calls ). However if you treat the app as a secure app and never load third party websites or scripts, then it's fine to turn off.

If you still want to go ahead, modify the next.config.js:

if (!isServer) {
  config.target = 'electron-renderer';
  config.node = {
    __dirname: true,
  };
}

config.output.globalObject = 'this';