I’m working on a project using Electron and React. The app runs perfectly in development mode, but after building it into an .exe or .dmg file, I encounter the following error when launching the application:
mathematica
코드 복사
Unexpected Application Error!
404 Not Found
The React app works fine in the browser, and this issue only occurs within the Electron app in production mode.
Here is my project structure:
main.js
import { BrowserWindow, app, ipcMain } from 'electron';
import * as path from 'path';
import * as isDev from 'electron-is-dev';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const BASE_URL = 'http://localhost:3000';
let mainWindow = null;
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
resizable: true,
webPreferences: {
devTools: isDev,
nodeIntegration: false,
preload: path.join(__dirname, 'preload.cjs'),
enableRemoteModule: false,
contextIsolation: true,
webSecurity: true,
},
});
if (isDev) {
mainWindow.loadURL(BASE_URL);
mainWindow.webContents.openDevTools({ mode: 'detach' });
} else {
mainWindow.loadFile(path.join(__dirname, '../build/index.html'));
}
};
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
ipcMain.on('close-app', () => {
console.log('close-app event received');
app.quit();
});
package.json
{
"name": "storygame",
"type": "module",
"version": "0.1.0",
"private": true,
"main": "public/main.js",
"homepage": "./",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.106",
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"electron-is-dev": "^3.0.1",
"howler": "^2.2.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.3.0",
"react-pageflip": "^2.0.3",
"react-router-dom": "^6.26.1",
"react-scripts": "^5.0.1",
"react-slick": "^0.30.2",
"slick-carousel": "^1.8.1",
"styled-components": "^6.1.13",
"typescript": "^4.9.5",
"url": "^0.11.4",
"web-vitals": "^2.1.4",
"zustand": "^4.5.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "wait-on http://localhost:3000 && electron .",
"compile-main": "./src/main/main.ts --outdir ./compile-main && ./src/main/preload.ts --outdir ./compile-main",
"dev": "concurrently "yarn start" "yarn electron"",
"build:win": "electron-builder --win",
"build:mac": "electron-builder --mac",
"build:linux": "electron-builder --linux"
},
"build": {
"extends": null,
"appId": "com.example.app",
"productName": "StoryGame",
"files": [
"build/**/*",
"public/**/*"
],
"directories": {
"output": "dist"
},
"win": {
"target": "nsis",
"icon": "public/icon.ico"
},
"mac": {
"target": "dmg",
"icon": "public/icon.icns"
},
"linux": {
"target": [
"AppImage",
"deb"
],
"icon": "public/icon.png"
}
},
"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"
]
},
"devDependencies": {
"concurrently": "^8.2.2",
"cross-env": "^7.0.3",
"electron": "^33.2.1",
"electron-builder": "^24.13.3",
"wait-on": "^8.0.0"
}
}
Could anyone point out what might be causing this error or suggest how I can troubleshoot and fix this issue?
Thanks in advance!
1