Electron-builder shows blank window after packaging

Viewed 30

After packaging with "npm run dist" when I launch the generated executable it only showed blank screen. Then I decided to put some text before my app and see if the problem is in wrong path name to the index.html or in something else. After packaging it shows the 'Hello World!' part and does not seem to load app.js.

No errors appear during building process.

When I launch with 'npm start' everything seems fine. I think the problem is either in dependencies or in electron-builder settings in package.json Can anyone help me out?

Project structure screenshot

index.html

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
  </head>
  <body>
  <h1>Hello World!</h1>
    <div id="root"></div>
    <script src="build/js/app.js"></script>
  </body>
</html>

Here's my package.json

{
  "name": "stbc",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "watch": "webpack --config webpack.common.js --watch",
    "dist": "electron-builder"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "electron": "^20.2.0",
    "@babel/core": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "electron-builder": "^23.3.3",
    "sass": "^1.55.0",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  },
  "build": {
    "appId": "com.STB.C",
    "productName": "СТБК",
    "target": "NSIS",
    "nsis": {
      "allowToChangeInstallationDirectory": true,
      "oneClick": false
    },
    "icon": "/img/icon.png"
  }
}

and main.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

function createWindow(){
    var BrowserWindow = require('electron').BrowserWindow
    const win = new BrowserWindow({
        width: 550,
        height: 652,
        backgroundColor: "darkgrey",
        webPreferences:{
            nodeIntegration: false,
            worldSafeExecuteJavaScript: true,
            contextIsolated: true
        },
        icon: __dirname + "/img/icon.png",
        useContentSize: true,
        autoHideMenuBar: true
    })

    win.loadURL(url.format({
        pathname: path.join(__dirname, '/index.html'),
        protocol: 'file:',
        slashes: true
    }));
}

app.on('closed', ()=> win = null);

app.on("ready",createWindow);

app.on('window-all-closed', app.quit)

0 Answers
Related