Summary
I want to pack my (working) electron-react app into a mac app file. It builds fine, but when I start it up, I simply get following error:
Error: ENOENT, electron not found in .../potoo/dist/mac/potoo.app/Contents/Resources/app.asar
Setup
- I use electron with react.
npm-startworks fine, electron is started and contains my application. It also can access electron specific eatures like "ipcRenderer"- React Content is placed in the
src/-Folder, while electron content is placed inelectron/ - I pack the project by using
npm run build && npm run electron-webpack && npm run packTo first build the react project and then pack it into an app.
The electron app starts up and renders the window as desired, but when the dom should load, it fails by displaying an error message (see above).
What I think it is
Since I load the ipcRenderer by calling const x = window.require('electron'), something fails to load the electron module correctly. I can't move electron to the dependencies though, it only allows it to be used as devDependency.
I don't know how to reference electron features correctly since it works fine in dev mode.
Additional Information
Package.json
{
"name": "potoo",
"version": "0.1.0",
"author": {...},
"description": "...",
"private": true,
"homepage": "./",
"main": "electron/main.js",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@types/jest": "^24.9.1",
"@types/node": "^12.12.54",
"@types/react": "^16.9.46",
"@types/react-dom": "^16.9.8",
"nedb": "^1.8.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"typescript": "^3.7.5",
"uuid": "^8.3.0"
},
"scripts": {
"start": "nf start -p 3000",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"electron": "electron .",
"electron-start": "node src/start-react",
"react-start": "BROWSER=none react-scripts start -c.extraMetadata.main=main/main.js",
"pack": "electron-builder --dir",
"dist": "npm run build && build",
"postinstall": "install-app-deps",
"compile": "electron-webpack"
},
"electronWebpack": {
"commonSourceDirectory": "common",
"main": {
"sourceDirectory": "electron"
},
"renderer": {
"sourceDirectory": null
}
},
"build": {
"appId": "com.electron.electron-with-create-react-app",
"win": {
"icon": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
},
"directories": {
"buildResources": "assets"
},
"extends": null
},
"files": [
"./build/**/*"
],
"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": {
"@types/uuid": "^8.3.0",
"electron": "^9.2.0",
"electron-builder": "^22.8.0",
"electron-webpack": "^2.8.2"
}
}
Files
├── .DS_Store
├── .eslintrc.json
├── .git
├── .gitignore
├── node_modules/
├── Procfile
├── README.md
├── electron
│ ├── database.module.js
│ ├── main.js
│ └── potoo.db
├── package-lock.json
├── package.json
├── public
│ ├── .DS_Store
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── components
│ ├── hooks
│ ├── index.css
│ ├── index.tsx
│ ├── react-app-env.d.ts
│ ├── serviceWorker.ts
│ ├── setupTests.ts
│ └── start-react.js
└── tsconfig.json
```