Electron white screen after built with log error not allowed to load resources

Lalat Putih 0
Viewed 34

I am trying to package my Electron application by using electron-builder. But somehow after succesfully built, When run the application and it only showed the white blank scree. Then when check the console, there is an error like below, is it a problem cause by the build itself or come from the package.json, or from my directory. any hint ? Thankyou

enter image description here

, Already tried many solution on the stack overflow and other place but not fixing the problem so I decided to add question.

I also attached my

package.json

 {
  "name": "cookbook-dekstop",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "homepage": "./",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --config webpack.common.js --watch",
    "start": "electron .",
    "build": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "axios": "^0.27.2",
    "babel-preset-es2015": "^6.24.1",
    "downloadjs": "^1.4.7",
    "file-loader": "^6.2.0",
    "html-to-image": "^1.10.8",
    "html2canvas": "^1.4.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0",
    "url-loader": "^4.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "autoprefixer": "^10.4.8",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "electron": "^20.1.1",
    "electron-reload": "^2.0.0-alpha.1",
    "postcss": "^8.4.16",
    "sass": "^1.54.8",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.1.8",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "build": {
    "appId": "cookbook-dekstop",
    "icon": "src/assets/cb.ico",
    "directories": {
      "output": "dist"
    },
    "extraFiles": [
      "./dist/assets/**"
    ],
    "files": [
      "./dist/**/*",
      "main.js",
      "preload.js"
    ],
    "linux": {
      "target": [
        "deb"
      ]
    },
    "mac": {
      "target": [
        {
          "target": "dmg",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "win": {
      "target": [
        "portable"
      ]
    }
  }
}

main.js

 var win = new BrowserWindow({
    width: 600,
    height: 800,
    backgroundColor: "white",
    icon: "./src/assets/cb.ico",
    webPreferences: {
      nodeIntegration: false,
      worldSafeExecuteJavaScript: true,
      contextIsolation: true,
      preload: path.join(__dirname, "preload.js"),
    },
    resizable: false,
  });

  win.loadURL(`file://${__dirname}/dist/index.html`);
electron-packager electron-builder electron
2 Answers

Try:

win.loadFile(path.join(__dirname,'dist/index.html'));

The problem is you are trying to load an "external" resource that is packaged within a asar archive...

exception0

I faced the same problem, the problem is after packing our app with electron builder, dist folder is missing inside app.asar file, so application cannot able to find the starting path. I found a way and that is actually working.

Step 1 : In your angular.json file change your output path to out/{your-app-name}

"outputPath": "out/{your-app-name}",

Step 2 : Change the path of loadUrl in main.js file as below

    win.loadURL(`file://${__dirname}/out/{your-app-name}/index.html`)

Step 3 : Now run this command ng build --prod && electron-builder -w , this will first build angular app and then it will pack using electron.

Hope this works, I faced this issue for 2 weeks, later I unzipped app.asar file and tried various things then found this working solution.

useriNNd10
Related