Build contains node_modules with vue

[omairabdullah]

Final build of application created with vue CLI and plugin electron-builder contains the following:
app.asar

• node_modules
  • vue
  • vue-router
    etc.
    Basically dependencies in package.json is copied which is electron-build's default behaviour.

Since Vue CLI already uses webpack to bundle these in static/js, isn't this just an unused duplication?

To Reproduce
Steps to reproduce the behavior:
Create basic app using Vue CLI. Add plugin electron-builder. Run electron:build. Examine dist_electron/win-unpackaged/resources/app.asar

Expected behavior
node_modules in app.asar should only contain modules not already bundled using webpack.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

• OS and version: Windows 10 (17763.379)
• node version: v11.6.0
• npm version: 6.9.0
• yarn version (if used): n/a
• vue-cli-plugin-electron-builder version : 1.1.3
• electron version: 4.1.0
• other vue plugins used: babel, typescript, unit-mocha
• custom config for vcp-electron-builder: none
• (if possible) link to your repo: n/a

Additional context
Add any other context about the problem here.

[romansp]

Oh wow, huge 👍 for finding that @plutonly. I just verified and node_modules adds around 30 megs to the final bundle of my medium-sized app.

Will be great to see this fixed.

[nklayman]

Electron builder handles the build step, and that is what packages the node_modules into your app. It should only packages dependencies (not devDependecies). I am trying to find a way to only package native modules. For now, maybe this stack overflow question can help.

[omairabdullah]

Yeah, I think we would need to exclude copying all the modules except those marked in webpack's 'externals' option.

So maybe electron-builder's config would be:

"build": { "files": { !node_modules \n node_modules/<module mentioned in webpack externals> } }

This could be added to package.json whenever plugin electron-builder is installed.

[nklayman]

The issue with that is that it won't exclude dependencies of that dep. Ie if my-bundled-dep requires lodash, lodash is still included in the bundle if you ignore my-bundled-dep. What would fix it would be purging the dependencies of the package.json for any non-external deps. It should be safe to do this since every dep not bundled with webpack must end up in the externals array.

[nklayman]

Released version 1.2.0 with the fix.

[Killea]

I don't think this was a correct fix.
I found out that it deleted the necessary modules and lead to a white screen.
I have to comment the '//delete pkg.dependencies[dependency]'.

[nklayman]

Did you mark the dependency as an external?

[korzewski]

Hi @Killea,
today I had the same problem with my dependency ("sharp"), after a long debugging I've found a solution.

Instead of commenting this line https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/master/index.js#L153

You can add this code, into your vue.config.js

pluginOptions: {
    electronBuilder: {
        externals: ['sharp'],
    },
},

My whole config now looks like this vue.config.js

module.exports = {
    configureWebpack: {
        externals: {
            sharp: 'commonjs sharp',
        },
    },
    pluginOptions: {
        electronBuilder: {
            externals: ['sharp'],
        },
    },
}

cc: @nklayman

[nklayman]

Yep, adding it as an external is the proper solution. You shouldn't need the configurewebpack option.

[korzewski]

You're right - it works. That make more sense now. Thanks!

[NidhoogJX]

After being added to externals, I am still prompted that I "cannot find module 'ffi napi'"

My configuration is as follows

pluginOptions: { electronBuilder: { nodeIntegration: true, externals: ['ffi-napi', 'ref-napi'], }}

If I run electron: serve directly, this problem will not occur. How can I solve it?