React App Not Loading into The Packaged Electron App

Question

I'm trying to package my react app with electron 8. I've followed the instructions in this article and made the necessary changes to suit my code:

https://medium.com/@johndyer24/building-a-production-electron-create-react-app-application-with-shared-code-using-electron-builder-c1f70f0e2649

Here's what I'm currently seeing after packaging.

Here's my package.json

 {
  "homepage": "./",
  "name": "Asset_Viewer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "7.9.0",
    "@svgr/webpack": "4.3.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "babel-eslint": "10.1.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "bootstrap": "^4.5.2",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "concurrently": "^5.2.0",
    "cross-env": "^7.0.2",
    "css-loader": "3.4.2",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "electron-is-dev": "^1.2.0",
    "eslint": "^6.6.0",
    "eslint-config-react-app": "^5.2.1",
    "eslint-loader": "3.0.3",
    "eslint-plugin-flowtype": "4.6.0",
    "eslint-plugin-import": "2.20.1",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.19.0",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "4.3.0",
    "fs-extra": "^8.1.0",
    "html-webpack-plugin": "4.0.0-beta.11",
    "identity-obj-proxy": "3.0.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "1.0.1",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.2",
    "mini-css-extract-plugin": "0.9.0",
    "node-sass": "^4.14.1",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-bootstrap": "^1.3.0",
    "react-dev-utils": "^10.2.1",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "resolve": "1.15.0",
    "resolve-url-loader": "3.1.1",
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "shelljs": "^0.8.4",
    "sqlite3": "^5.0.0",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "2.3.5",
    "ts-pnp": "1.1.6",
    "url-loader": "2.3.0",
    "wait-on": "^5.0.0",
    "webpack": "4.42.0",
    "webpack-dev-server": "3.10.3",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "build-electron": "mkdir build\\src > nul & robocopy src\\shared build\\src\\shared /s > nul & robocopy electron build\\electron /s > nul || exit 0",
    "electron-dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\"",
    "eject": "react-scripts eject",
    "electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js",
    "preelectron-pack": "npm run build"
  },
  "build": {
    "appId": "com.icom.icomuav",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "assets"
    }
  },
  "main": "public/electron.js",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "style-loader": "^1.2.1",
    "electron": "^8.2.5",
    "electron-builder": "^22.6.0"
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

Basically this are the order which I run the scripts to package the whole thing.

1. build
2. build-electron
3. electron-pack

Any help would be appreciated. Thanks!

Answer 1

I know that I'm late to this, but I spent days tracking this issue down.

I ran npm run build first to package my react application so that i would actually have a build folder.

In my case, after using electron-forge to package my application, inside index.html all of my local imports to my.js files were missing the '.' before "/static/js/etc.js".

example:

example 2:

once changing it to the correct one as shown, it loaded everything just fine:

I really hope this helps someone.

Answer 2

I would suggest you to log the current route to the console, so you can see what page is loaded when you open both the development and the production build.

It might be caused by the router. In your project you probably have only 1 real HTML page - index.html , so make sure it loads /index.html and not /index.html/# (hash mode) or something.

Also try to add this event listener in your main process:

// Replace YOUR_WINDOW and modify the line that loads the URL 
// (the same way you load URL when the window is created)
YOUR_WINDOW.webContents.on('did-fail-load', () => {
  if (process.env.NODE_ENV === 'production') {
    YOUR_WINDOW.loadURL('app://./index.html')
  }
})

Answer 3

This can be fixed with chrome settings. Please try to uncheck maps settings in Developer Tools Settings, and then refresh chrome.

• uncheck Enable JavaScript source maps
• uncheck Enable CSS source maps