reactjs - Electron 在开发中运行后不启动应用程序

Question

我知道有很多关于这个的话题，但是由于它们都不起作用，我必须做一个新的，我很困惑为什么我的电子应用程序在我用于yarn dev我的项目时没有启动，但是当我的朋友们试试，在他的笔记本上，他可以运行，应用程序正常启动没有任何问题，所以这里有人遇到过和我一样的问题吗？如果有人，你怎么能解决这个问题？

这就是我的终端的样子：

对于我使用的信息：

node version : 14.16.1
yarn version : 1.22.0
npm version  : 6.14.12
OS           : Windows 10 64 bit 

这是我的package.json depedencies样子：

"devDependencies": {
  "@babel/core": "^7.8.6",
  "@babel/plugin-proposal-class-properties": "^7.8.3",
  "@babel/plugin-proposal-decorators": "^7.8.3",
  "@babel/plugin-proposal-do-expressions": "^7.8.3",
  "@babel/plugin-proposal-export-default-from": "^7.8.3",
  "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
  "@babel/plugin-proposal-function-bind": "^7.8.3",
  "@babel/plugin-proposal-function-sent": "^7.8.3",
  "@babel/plugin-proposal-json-strings": "^7.8.3",
  "@babel/plugin-proposal-logical-assignment-operators": "^7.8.3",
  "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
  "@babel/plugin-proposal-numeric-separator": "^7.8.3",
  "@babel/plugin-proposal-optional-chaining": "^7.8.3",
  "@babel/plugin-proposal-pipeline-operator": "^7.8.3",
  "@babel/plugin-proposal-throw-expressions": "^7.8.3",
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
  "@babel/plugin-syntax-import-meta": "^7.8.3",
  "@babel/plugin-transform-react-constant-elements": "^7.8.3",
  "@babel/plugin-transform-react-inline-elements": "^7.8.3",
  "@babel/preset-env": "^7.8.6",
  "@babel/preset-react": "^7.8.3",
  "@babel/preset-typescript": "^7.8.3",
  "@babel/register": "^7.8.6",
  "@types/enzyme": "^3.10.5",
  "@types/enzyme-adapter-react-16": "^1.0.6",
  "@types/history": "^4.7.5",
  "@types/jest": "^24.9.1",
  "@types/node": "^12",
  "@types/react": "^16.9.17",
  "@types/react-dom": "^16.9.5",
  "@types/react-redux": "^7.1.6",
  "@types/react-router": "^5.1.4",
  "@types/react-router-dom": "^5.1.3",
  "@types/react-test-renderer": "^16.9.2",
  "@types/redux-logger": "^3.0.7",
  "@types/sinon": "^7.5.1",
  "@types/tapable": "^1.0.5",
  "@types/vfile-message": "^2.0.0",
  "@types/webpack": "^4.41.3",
  "@typescript-eslint/eslint-plugin": "^2.17.0",
  "@typescript-eslint/parser": "^2.17.0",
  "babel-core": "7.0.0-bridge.0",
  "babel-eslint": "^10.1.0",
  "babel-jest": "^25.1.0",
  "babel-loader": "^8.0.6",
  "babel-plugin-dev-expression": "^0.2.2",
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
  "browserslist-config-erb": "^0.0.1",
  "chalk": "^3.0.0",
  "concurrently": "^5.0.2",
  "cross-env": "^7.0.0",
  "cross-spawn": "^7.0.1",
  "css-loader": "^3.4.2",
  "detect-port": "^1.3.0",
  "electron": "7.1.13",
  "electron-builder": "^22.7.0",
  "electron-devtools-installer": "^2.2.4",
  "electron-rebuild": "^1.10.0",
  "enzyme": "^3.11.0",
  "enzyme-adapter-react-16": "^1.15.2",
  "enzyme-to-json": "^3.4.4",
  "eslint": "^6.8.0",
  "eslint-config-airbnb-typescript": "^6.3.1",
  "eslint-config-erb": "^0.3.0",
  "eslint-config-prettier": "^6.9.0",
  "eslint-import-resolver-webpack": "^0.12.1",
  "eslint-plugin-compat": "^3.5.1",
  "eslint-plugin-import": "^2.20.0",
  "eslint-plugin-jest": "^23.6.0",
  "eslint-plugin-jsx-a11y": "6.2.3",
  "eslint-plugin-prettier": "^3.1.2",
  "eslint-plugin-promise": "^4.2.1",
  "eslint-plugin-react": "^7.18.0",
  "eslint-plugin-react-hooks": "^2.3.0",
  "eslint-plugin-testcafe": "^0.2.1",
  "fbjs-scripts": "^1.2.0",
  "file-loader": "^6.1.0",
  "husky": "^4.2.0",
  "identity-obj-proxy": "^3.0.0",
  "jest": "^25.1.0",
  "lint-staged": "^10.0.2",
  "mini-css-extract-plugin": "^0.9.0",
  "node-sass": "^4.13.1",
  "opencollective-postinstall": "^2.0.2",
  "optimize-css-assets-webpack-plugin": "^5.0.3",
  "prettier": "^1.19.1",
  "react-test-renderer": "^16.12.0",
  "redux-logger": "^3.0.6",
  "rimraf": "^3.0.0",
  "sass-loader": "^8.0.2",
  "sinon": "^8.1.1",
  "spectron": "^10.0.0",
  "style-loader": "^1.1.3",
  "stylelint": "^13.0.0",
  "stylelint-config-prettier": "^8.0.1",
  "stylelint-config-standard": "^19.0.0",
  "terser-webpack-plugin": "^2.3.2",
  "testcafe": "^1.8.0",
  "testcafe-browser-provider-electron": "^0.0.14",
  "testcafe-react-selectors": "^4.0.0",
  "typed-css-modules-webpack-plugin": "^0.1.2",
  "typescript": "^3.7.5",
  "url-loader": "^3.0.0",
  "webpack": "^4.41.5",
  "webpack-bundle-analyzer": "^3.6.0",
  "webpack-cli": "^3.3.10",
  "webpack-dev-server": "^3.10.1",
  "webpack-merge": "^4.2.2",
  "yarn": "^1.21.1"
},
"dependencies": {
  "@fortawesome/fontawesome-free": "^5.12.1",
  "@hot-loader/react-dom": "^16.12.0",
  "apollo-cache-inmemory": "1.6.6",
  "apollo-client": "2.6.10",
  "apollo-link-ws": "1.0.20",
  "autosize": "^4.0.2",
  "axios": "^0.19.2",
  "browser-image-compression": "^1.0.14",
  "check-disk-space": "^2.1.0",
  "connected-react-router": "^6.6.1",
  "core-js": "^3.6.4",
  "cross-fetch": "^3.0.4",
  "crypto-js": "^4.0.0",
  "devtron": "^1.4.0",
  "electron-debug": "^3.0.1",
  "electron-dl": "^3.0.0",
  "electron-log": "^4.0.6",
  "electron-store": "^5.1.1",
  "electron-updater": "^4.2.0",
  "graphql": "15.4.0",
  "graphql-tag": "2.11.0",
  "history": "^4.10.1",
  "katex": "^0.11.1",
  "moment": "^2.27.0",
  "moment-timezone": "^0.5.31",
  "patch-package": "^6.2.2",
  "radium": "^0.26.0",
  "rc-slider": "^9.2.3",
  "react": "^16.12.0",
  "react-animations": "^1.0.0",
  "react-card-flip": "^1.0.10",
  "react-circular-progressbar": "^2.0.3",
  "react-datepicker": "^3.0.0",
  "react-dom": "^16.12.0",
  "react-hot-loader": "^4.12.19",
  "react-loader-spinner": "^3.1.14",
  "react-loading-skeleton": "^2.0.1",
  "react-player-pfy": "^1.16.0",
  "react-redux": "^7.1.3",
  "react-router": "^5.1.2",
  "react-router-dom": "^5.1.2",
  "react-sound": "^1.2.0",
  "react-spinners": "^0.8.1",
  "react-transition-group": "^4.4.1",
  "recharts": "^1.8.5",
  "redux": "^4.0.5",
  "redux-thunk": "^2.3.0",
  "source-map-support": "^0.5.16",
  "subscriptions-transport-ws": "0.9.18",
  "uuid": "^8.2.0"
},

我很困惑为什么它没有出现在我的案例中，起初可能是因为 browserify 更新但是当我的朋友尝试它时，它仍然有效，所以这种可能性已经存在。

我试图删除node modules, yarn-lock, and package-lock.json，仍然没有解决问题

有人可以帮我解决这个问题吗？或者指出哪里错了？谢谢你

编辑1：

当我最终尝试运行electron index.html时，铬出现了，但就是这样，项目本身并没有启动

例如，它看起来像这样：

我猜是因为项目还没有开始（服务中），当我试图同时服务它并使用它electron index.html时，它仍然不起作用，所以下一个问题是，有没有办法使用它来服务它electron？因为我尝试过electron project-name，但它给出了这个错误：

标签： reactjselectron

Answer 1

终于在 3 天后我找到了这个问题的答案，事实上，我在 github 问题的一些线程中阅读了某人的评论后才意识到这一点（对不起，我忘记了链接）。所以问题是，您通常可以在 Windows 10 中启动您的电子应用程序，而不会出现任何问题，就像我在问题中所说的那样

您的 Windows Personalize 设置为浅色主题颜色

但是因为在我的情况下，我将它设置为深色主题，所以窗口本身运行没有任何问题，除了，

应用程序不会因此而启动。

如果您将此行app.removeAllListeners('ready');放在您的上方，您可以修复它或在暗模式下运行您的电子应用程序app.on('ready', createWindow);

例如像这样：

// Use app.removeAllListeners('ready'); if you set your windows personalize in Dark Theme
app.removeAllListeners('ready');

app.on('ready', createWindow);

这是更好理解的图像：

从这里开始只是我的理论，也许有一个监听器在我们设置个性化主题的同时在后台运行，Dark Mode并使用它app.removeAllListeners('ready');删除所有由于暗模式设置而影响铬的监听器。

所以，是的，最快的解决方案也许您可以尝试先将您的主题个性化更改为灯光模式，如果这解决了您的问题，那么这意味着我们遇到了同样的问题。如果您仍然对在哪里找到它感到困惑，这是支持您的图像：