Try the new native dependency checker (Help Wanted)

[nklayman]

If your app uses native dependencies, chances are you have had to configure the externals array in vue.config.js. Included in v2.0.0-rc.3 is a new way of checking for native deps that should allow you to completely remove your externals array. It is currently disabled by default, but I would like to replace the old version by v2.0.0.

To test it, simply upgrade to v2.0.0-rc.3 and update your vue.config.js like so:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
-       externals: ['native-dep', ...]
+       experimentalNativeDepCheck: true
    }
  }
}

Now, run electron:serve and it should automatically detect native deps and compilation should succeed. If this works for you, please 👍 this issue. If not, please leave a comment with the native deps you are using.

[mmikhan]

While the native dependencies are now working, I am seeing the following warnings on terminal whenever using native dependency like https://github.com/svg/svgo.

Launching Electron...
(electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead.
(node:5653) ExtensionLoadWarning: Warnings loading extension at /Library/Application Support/dd/extensions/nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

Whenever I remove the native dependency reference from the code, the warnings disappear. I tried with the experimentalNativeDepCheck: true check in vue.config.js.

[nklayman]

@iamazik It's odd that those warnings only appear with native deps as they are related to devtools extensions. See https://github.com/nklayman/vue-cli-plugin-electron-builder/releases/tag/v2.0.0-rc.4 for instructions on upgrading to electron-devtools-installer which will fix those warnings.

[mmikhan]

I don't know why but the v2.0.0-rc.4 is now showing the following warning in the terminal when even without having a native dependency at all. It's just a fresh project:

ExtensionLoadWarning: Warnings loading extension at /Library/Application Support/project/extensions/nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

Looks like it's related #776 and was fixed here but still appearing.

[nklayman]

@iamazik I think that is a bug with VueJS Devtools not supporting some electron 9 changes, but I'm not sure. Try clearing the app's config (rm -r ~/.config/APP_NAME).

[romansp]

With experimentalNativeDepCheck: true I see the following warning during bundling:

 WARNING  Compiled with 1 warnings                                                                          10:34:02 PM
 warning  in ./node_modules/express/lib/view.js

Critical dependency: the request of a dependency is an expression

We have a direct dependency on express and use it inside our app but it still starts and works correctly. All other native dependencies look fine when in development. Haven't tried published app yet.

[claudioluciano]

It's not working for me.

Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to 
process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

I'm using neon-binding to create the native module.

[nklayman]

@claudioluciano is the native module in node_modules or in a sperate folder? If it's in node_modules, can you post the list of files in it (ls node_modules/module-name)?

[claudioluciano]

@nklayman I tried to put it in node_modules, in a separate folder at the root of the project, it didn't work.
When I placed the module in node_modules, I placed only the .node file

[nklayman]

The new checker won't work for .node files as it looks for a bindings.gyp file, which is the same technique electron-builder uses to find native modules that need to be built. You will have to keep that in your externals array.

[nklayman]

@romansp the old checker reports express as an external, while the new one doesn't. Even though express doesn't have any native code, it seems people recommend adding it as an external regardless, so you may want to add it to your externals array.

[mmikhan]

@iamazik I think that is a bug with VueJS Devtools not supporting some electron 9 changes, but I'm not sure. Try clearing the app's config (rm -r ~/.config/APP_NAME).

@nklayman I am afraid to say that I don't have anything located in the rm -r ~/.config/APP_NAME that I could delete. I only have the following under the ~/.config location:

~/.config/
├── configstore/
    ├── nodemon.json
    ├── update-notifier-npm.json
    ├── update-notifier-electron-builder.json
├── yarn/
    ├── global/

Separate issue

I found something else now. The new experimentalNativeDepCheck: true in the vue.config.js doesn't work when a non-native dependency has a native peer dependency. However, the old externals: [''] still works though.

For example, the @iconify/tools is a non-native dependency whereas, it has the svg/svgo as a peer dependency which is a native dependency. When I use the experimentalNativeDepCheck: true in the vue.config.js file, it doesn't work and shows the following error:

Error: ENOENT: no such file or directory, open '/Users/mazik/Desktop/icon-suite/dist_electron/../../.svgo.yml'

This error is related to the native dependency issue that was described here before.

Steps to reproduce

vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js',
      experimentalNativeDepCheck: true
    }
  }
}

App.vue

export default {
  name: 'App',
  mounted() {
    window.ipcRenderer.send('home');
};

background.js

import tools from '@iconify/tools';
import { ipcMain } from 'electron';

let collection;

ipcMain.on('home', event => {
  tools
  .ImportDir('./source')
  .then(result => {
    collection = result;
    
    return collection.promiseAll(svg => tools.SVGO(svg));
  })
  .catch(error => console.error(error));
});

Where ./source directory includes a .svg file/icon. When running the above example, you'll see the error. However, if you use the following, there won't be an error:

vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js',
      externals: ['@iconify/tools'],
    }
  }
}

I hope that it helps you to find the root cause of the issue ✌️

[nklayman]

svgo isn't a native dependency as it doesn't need to build native bindings. It just reads a config file at runtime, which means it has to be externalized. There isn't a good way of detecting this automatically so I can't really do anything about it.