javascript - 更新 Electron 问题 : Uncaught ReferenceError: global is not defined

Question

我正在使用 ReactJS + Bootstrap 和 Typescript 开发 Electron 应用程序，当我尝试将我的 Electron 版本 (11.5.0) 更新到当前版本 (15.2.0) 时，我在开发人员中偶然发现了这条错误消息工具控制台:

忽略警告，因为它在我将 Electron 更新到更新版本之前就已经存在，问题是该应用程序完全空白且无法使用。我尝试在 SO 中使用谷歌搜索和搜索消息，但大多数帖子和答案都与 Angular 和“polyfills.ts”文件相关。

我也尝试更新到较低版本 (12.2.2)，但它也坏了。

├── @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

这是我的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"
  }
}

我还有这两个 Webpack 配置文件:

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"],
    },
  ],
};

和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()];

如果有任何帮助，我正在使用最新的 LTS 版本的 Node (16.13.0)。

破坏的代码来自一个我没有手动生成的文件，所以我怀疑它有什么用，但这里是 jsonp block 加载(global 未定义):

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

添加<script>var global = global || window;</script>添加到您的 index.html 文件将解决问题。我试图将其删除，但遇到了与您相同的错误。