【发布时间】：2021-12-13 06:20:28
【问题描述】：
我正在使用 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 块加载（全局未定义）：
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;
}
};
【问题讨论】：
-
请显示报告错误的代码行@Lucas S.G.
-
@Maxpan 问题是我无法超越这一点，因为错误所指的原点来自我没有创建的文件，而是在捆绑期间自动生成的文件.我仍然会添加破坏的代码以防万一。
-
我认为这里的讨论会很有启发性，并且有几种替代解决方案，其中一种可能适用于您的代码：github.com/webpack/webpack/issues/10035
-
谢谢@Mordred，您指向该 webpack 问题的链接部分帮助了我。那里只有两种解决方案，一种是在我的 index.html 中添加一个小脚本，但这不起作用。另一个“解决方案”是将 contextIsolation 设置为 false，这会使您的应用面临安全问题，因为渲染器进程和 Electron 的内部逻辑不再隔离。就我而言，我认为这不会有那么大的问题，但应该有更好的解决方案。
-
我项目中的这段代码解决了
<script>var global = global || window;</script>的问题。我不知道有什么要求
标签： javascript node.js reactjs webpack electron