Electron doesn't launch app after run it in development

Question

I Know that there is a lot of topic about this, but since none of them work, I must make a new one, I'm quite confused as why my electron app doesn't launch when I used yarn dev for my project, but when my friends try it, in his laptop, he can run and the apps launch normally without any problem, so Is there anyone here ever face the same problem with me? if there is someone, how can you solve this problem?

this is what my terminal looks like:

for information I used:

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

this is my package.json depedencies looks like:

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

I'm seriously confused as why it not appear in my case, at first maybe because browserify update but when my friend try it, it still works, so this possibility already out.

I tried to delete node modules, yarn-lock, and package-lock.json and still not solve the issue

Can someone help me to solve this? or point it where It is wrong? thankyou

EDIT 1:

When I tried to run electron index.html finally the chromium show up, but it just that, the project itself doesn't start

for example it looks like this:

my guess it is because the project not start yet (in serve), when I tried to serve it and using electron index.html at the same time, it still doesn't work, so here the next question, is there any way to serve it using electron? since I tried electron project-name and it give this error instead:

Answer 1

Finally after 3 days I find the answer for this issue, in fact, I just realize it after I read someone's comment in some of thread in github issue (Sorry I forgot about the link). So the problem is, You can normally start your electron apps in windows 10 without any problem like I state in my question if

Your Windows Personalize is set to light Theme Color

But since in my case I Set it to Dark Theme the window itself run without any problem except,

The Application won't launch because of it.

you can fix it or run your Electron application in dark mode if you put this line app.removeAllListeners('ready'); above your app.on('ready', createWindow);

for example like this:

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

app.on('ready', createWindow);

this is image for better understanding:

from here on is just my theory, maybe there is a listener that run in the background in the same time as we set our personalize theme to Dark Mode and using this app.removeAllListeners('ready'); we remove all listener that affect chromium because of Dark Mode setting.

so yeah, the fastest solution maybe you can try to change your theme personalize to light mode first and if this fix your issue, then it means we have stumbled the same problem. if you still confused where you find it, this is the image to support you:

Answer 2

This may be a silly answer. Try checking whether the task is running or any other programs interfereing the app, like an antivirus.