Electron-vue: Which package.json file should additional npm modules be added to?

[mstralka]

My app is trying to use the request module to download multiple files from the main process. When I run npm run dev it works fine and the files download properly, but when I run npm run build:darwin and then try to execute the app, I get this error:

Uncaught Exception:
Error: Cannot find module 'request'
    at Module._resolveFilename (module.js:440:15)
....

Reading the package structure documentation, I tried installing the request module in ./package.json under devDependencies, and also tried installing it in app/package.json under dependencies, but I still get the same error.

Which package.json file is the proper one to put additional node modules that will be needed by the compiled app? And do I need to do something special with electron-rebuild? I see it's installed with the project but I don't see it being used anywhere in the npm tasks.

Thank you

[SimulatedGREG]

Currently, electron-vue does not support main process bundling. The current setup will use webpack to bundle all files in src for only the renderer process and then ignore node_modules in the final production build. Since the request package is not bundled and node_modules are ignored, it will be missing (no matter what package.json it is installed in). There are currently no plans to support main process bundling as hot-reloading isn't stable enough (yet) with webpack for node processes.

One workaround would be is to disable building.asar compression from the config.js and then manually copy over the requestmodule (and sub-dependencies) to the final build. It's not the most friendly way to fix this, but I'm sure you can understand the issue happening now. Thanks for bringing this up, as I'll add some more information about this in the documentation. This stuff can get complex to explain. Hope this helps 😊.

[floscr]

I found a dirty workaround for including modules needed for the main process.

I need the https://github.com/sindresorhus/electron-config package for my app for example.

So i listed all needed node_modules for electron-config and excluded them from the electron-packager ignore:

ignore: /\b(node_modules\/(?!conf|dot-prop|electron-config|env-paths|find-up|is-obj|minimist|mkdirp|path-exists|pinkie|pinkie-promise|pkg-up).*|src|index\.ejs|icons)\b/,

Feels very hacky, but this way you do not have to move the dependencies out of the node_modules folder.

[SimulatedGREG]

@floscr
Thanks for the heads up.

I've previous thought about this in the past, but I would hate for users of this boilerplate to have to manually write out deps they need in production builds. So yeah, pretty hacky indeed, but I'm still considering it.

It might be worth making a script that snoops app/electron.js during production builds and programmatically add the appropriate packages in the ignore field.

[komplexb]

Does this problem extend to non npm modules? I'm getting an error for one of my src files when I run the .app created by the build.

Uncaught Exception:
Error: Cannot find module './src/main/persist'
    at Module._resolveFilename (module.js:455:15)
    at Function.Module._resolveFilename

Trying https://github.com/SimulatedGREG/electron-vue/issues/22#issuecomment-265742340 only fixed the npm requires and dependencies in my electron.js file.

Hey @floscr did you experience something similar as well?

[SimulatedGREG]

The src folder is also ignored during the build process as well. Moving your custom file into the app should do the trick.

[komplexb]

@SimulatedGREG I tried customizing the ignore string like https://github.com/SimulatedGREG/electron-vue/issues/22#issuecomment-265742340 and that worked.