Using node-modules in main.js using electron-builder and webpack

Question

First of all I do not know if the problem I am having is because of webpack or electron-builder or a combination.

To the problem. When I build for development I am able to use installed node-modules in the main.js file specified in my package.json file{"main" : "app/main.js"}.

However when I have used electron builder to create an installer. When I have installed the app using the installer I get the following error message when starting the app: Error Message My guess is that I get this message because the the needed node-modules can not be found by main.js. So how do I make them available?

I hope there is someone smarter than me our just better at googling :)

Package.js:

{
  "main": "app/main.js",
  "scripts": {
    "hot-server": "node hot-server.js",
    "build-bundle": "rimraf app/dist.release && better-npm-run build-bundle",
    "start": "better-npm-run start",
    "start-hot": "better-npm-run start-hot",
    "backend": "node backend-dummy.js",
    "dist-win": "npm run build-bundle && rimraf dist && build --win --ia32",
    "dist-mac": "npm run build-bundle && rimraf dist && build --mac"
  },
  "betterScripts": {
    "start": {
      "command": "electron ./",
      "env": {
        "NODE_ENV": "production"
      }
    },
    "start-hot": {
      "command": "electron ./",
      "env": {
        "HOT": 1,
        "NODE_ENV": "development"
      }
    },
    "build-bundle": {
      "command": "webpack --config webpack.config.production.js --progress --profile --colors",
      "env": {
        "NODE_ENV": "production"
      }
    }
  },
  "bin": {
    "electron": "./node_modules/.bin/electron"
  },
  "build": {
    "appId": "app",
    "files": [
      "dist.release/*",
      "dist.resources/*",
      "main.js",
      "thirdparty/*",
      "app.html"
    ],
    "extraFiles": [
      "lang/*",
      {
        "from": "build/extra",
        "to": "./",
        "filter": "**/*"
      }
    ],
    "asar": true
    }

Are you using Electron-packager? Also, do you have electron-log in the devDependencies section of your package.json? — unseen_damage
No I do not use Electron-packager. I have electron-log and electron-updater in dependencies. — Jakob Berglund
After a bit more digging around I think it has something to do with that all my node-modules are packaged using browserify and hidden in that bundle. So I guess I have two choices either manage to add the needed node-modules outside of my bundle or access them inside my bundle. — Jakob Berglund
I am pretty sure that devDependencies don't get included in the build when you are using electron-builder, but I can't confirm that at the moment. So if it is a dev dependency, it will be pruned out. Webpack will not have anything to do with bundles, because typically you exclude node modules in the webpack config. — unseen_damage

Jakob Berglund Jakob Berglund · Accepted Answer · 2017-03-08T16:27:04

So I found a solution to my problem. What I did was I looked at this project: https://github.com/chentsulin/electron-react-boilerplate

Where they have a special webpack.config.electron.js file that bundles all the node_modules for the main.development.js file into a main.js file that contains everything we need. And then when the electron program starts it uses this main.js bundle to run. To make this happen you need to add a build script in your package.json file that executes webpack.config.electron.js.

I think it is easier to understand how to solve it by looking the linked project than for me to explain.

Using node-modules in main.js using electron-builder and webpack

1 Answers