How to correctly pack my electron/react app that uses electron features?

Viewed 646

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-start works 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 in electron/
  • I pack the project by using npm run build && npm run electron-webpack && npm run pack To 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
```
0 Answers
Related