vue-cli-plugin-electron-builder: Errors retrieving paths, node-module externalization?

Describe the bug

Hello! Thanks a lot to your for providing this plugin.

I tried to migrate my project from electron-webpack to vue-cli-plugin-electron-builder cause HMR is broken in electron-webpack atm.

I created a new project with vue cli and then merged the automatically created files with my project and deleted the unneccesary ones.

When I run serve:electron, I get the error shown in the screenshot. Note that leveldown is a native dependency in my project and shouldnt be included in Webpack.

With electron-webpack, the “renderer.js” webpack file has 4,000 lines. With vue-cli-plugin-electron-builder, I get to 19,000 lines in “app.js”!

I suspected that webpack didn’t externalize the node-modules.

So I then changed the vue.js.config to externalize all packages in my package.json by webpack (see below). Then, I get a strange path error. It seems to try to fetch modules from:

“C:[appfolder]\node_modules\electron\dist\resources\default_app.asar\node_modules” “C:[appfolder]\node_modules\electron\dist\resources\node_modules” “C:[appfolder]\node_modules\electron\dist\resources\electron.asar\renderer\api\exports” and throws an error (cause package is located in “C:[appfolder]\node_modules”)

To summarize:

Something’s wrong with the module externalization
Something’s wrong with the path.

Thanks a lot for your help.

To Reproduce Steps to reproduce the behavior:

Add node-modules as webpack.externals
Check projects with native libraries

Environment (please complete the following information):

OS and version: Win 10 x64 Prof
Node version: 8.11.4
npm version: recent
yarn version (if used): recent
other vue plugins used: “vue”: “^2.5.17”, “vue-async-computed”: “^3.4.0”, “vue-electron”: “^1.0.6”, “vue-router”: “^3.0.1”, “vue-shortkey”: “^3.0.2”, “vuedraggable”: “^2.16.0”, “vuetify”: “^1.1.11” “@vue/cli-plugin-babel”: “^3.0.0”, “@vue/cli-plugin-eslint”: “^3.0.0”, “@vue/cli-plugin-unit-jest”: “^3.0.0”, “@vue/cli-service”: “^3.0.0”, “@vue/eslint-config-standard”: “^3.0.0”, “@vue/test-utils”: “^1.0.0-beta.20”, “vue-cli-plugin-electron-builder”: “^1.0.0-beta.6”, “vue-template-compiler”: “^2.5.17”,
custom config for vcp-electron-builder:

var nodeExternals = require('webpack-node-externals');
module.exports = {
  pluginOptions: {
    electronBuilder: {
      chainWebpackRendererProcess: config => {
        config.externals(nodeExternals(
          {
            modulesFromFile: true,
            whitelist: ['vue']
          }
        ))
        return config
      },
  }
}
}

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 36 (25 by maintainers)

Most upvoted comments

Alright, I have a solution! Set vue.config.js to:

module.exports = {
    pluginOptions: {
        electronBuilder: {
            chainWebpackRendererProcess: config => {
                config.module
                    .rule('node-loader')
                    .test(/\.node$/)
                    .use('node')
                    .loader('node-loader')
                config.resolve.alias.set(
                    'leveldown',
                    'leveldown/build/Release/leveldown.node'
                )
                return config
            }
        }
    }
}

This redirects leveldown to the actual leveldown.node file and configures node-loader (which you will need to install with yard add -D node-loader). This might be a poor way to do this (I know very little about native modules/externals). If you think so, I will look to find a better way.

EDIT: make sure to run yarn electron-builder install-app-deps after installing/upgrading node_modules and before running serve:electron. build:electron does this automatically.

nklayman on Aug 17, 2018

Electron-Webpack uses node loader as well. I think that they don’t need the alias mapping becuase they use the recommended electron structure, while vcp-electron-builder has to use that of vue-cli. They might have some other setting that makes it work that I would love to implement, so let me know if you find anything.

nklayman on Aug 17, 2018