My Electron App is Not Loading After Packaging

Question

Checked app.asar contents I verified that build/index.html and other necessary files exist inside app.asar, meaning they are correctly included in the package.

✅ 2. Modified electron.js to correctly load index.html Initially, I was using:

I'm building an Electron + React application, and after packaging it with electron-builder, the app opens but remains blank.

mainWindow.loadFile("build/index.html");

I changed it to:

const startURL = \file://${path.join(__dirname, 'build', 'index.html')}`;`
mainWindow.loadURL(startURL);

. Opened DevTools (Ctrl + Shift + I) to Check Errors I added the following lines to electron.js to see potential errors:

mainWindow.webContents.openDevTools();
 mainWindow.webContents.on("devtools-opened", () => {
 mainWindow.webContents.closeDevTools();
});

My code is :

const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
app.whenReady().then(() => {
 mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 icon: path.join(__dirname, 'build', 'favicon.ico'),
 webPreferences: {
 nodeIntegration: true,
 contextIsolation: false
 }
 });
 // 🚀 Cargar correctamente `index.html` de React
 const startURL = `file://${path.join(__dirname, 'build', 'index.html')}`;
 mainWindow.loadURL(startURL);
 // 🔹 Abre DevTools y lo cierra inmediatamente (Para verificar que carga sin errores)
 mainWindow.webContents.openDevTools();
 mainWindow.webContents.on("devtools-opened", () => {
 mainWindow.webContents.closeDevTools();
 });
 mainWindow.on('closed', () => {
 mainWindow = null;
 });
});
app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') {
 app.quit();
 }
});
main
const { app, BrowserWindow } = require('electron');
const path = require('path');
const { spawn } = require('child_process');
let serverProcess;
function startServer() {
 // Asegúrate de que la ruta a server.js sea la correcta
 serverProcess = spawn('node', [path.join(__dirname, 'server.js')]);
 serverProcess.stdout.on('data', (data) => {
 console.log(`Servidor: ${data}`);
 });
 serverProcess.stderr.on('data', (data) => {
 console.error(`Error del servidor: ${data}`);
 });
}
function createWindow() {
 const win = new BrowserWindow({
 width: 800,
 height: 600,
 webPreferences: {
 nodeIntegration: false,
 contextIsolation: true
 }
 });
 
 // Cargar el index.html del build de React
 win.loadFile(path.join(__dirname, 'build', 'index.html'));
}
app.whenReady().then(() => {
 startServer();
 createWindow();
});
app.on('window-all-closed', () => {
 if (serverProcess) serverProcess.kill();
 if (process.platform !== 'darwin') app.quit();
});

package

{
 "name": "cotizador",
 "version": "0.1.0",
 "main": "electron.js",
 "private": true,
 "dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "axios": "^1.7.9",
 "cors": "^2.8.5",
 "express": "^4.21.2",
 "node-fetch": "^2.7.0",
 "pdf-lib": "^1.17.1",
 "react": "^19.0.0",
 "react-dom": "^19.0.0",
 "react-scripts": "5.0.1",
 "url": "^0.11.4",
 "web-vitals": "^2.1.4"
 },
 "scripts": {
 "start": "react-scripts start",
 "build": "react-scripts build",
 "electron-dev": "npm run build && electron .",
 "dist": "npm run build && electron-builder",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 },
 "eslintConfig": {
 "extends": [
 "react-app",
 "react-app/jest"
 ]
 },
 "browserslist": {
 "production": [
 ">0.2%",
 "not dead",
 "not op_mini all"
 ],
 "development": [
 "last 1 chrome version",
 "last 1 firefox version",
 "last 1 safari version"
 ]
 },
 "build": {
 "appId": "com.tuempresa.miapp",
 "directories": {
 "buildResources": "build"
 },
 "files": [
 "build/**/*",
 "electron.js",
 "package.json",
 "server.js"
 ],
 "win": {
 "target": "nsis",
 "icon": "build/icon.ico"
 },
 "mac": {
 "target": "dmg"
 },
 "linux": {
 "target": "AppImage"
 },
 "extraResources": [
 {
 "from": "build",
 "to": "build"
 }
 ],
 "afterPack": "cp -r build/ dist/win-unpacked/build/"
 },
 "devDependencies": {
 "electron": "^34.2.0",
 "electron-builder": "^25.1.8"
 }
}

Project structure

blank screen packing loss react js

• Arkellys: This question is similar to: Blank page after build electron react app. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem.