Skip to content

Try the new native dependency checker (Help Wanted) #861

Closed
@nklayman

Description

@nklayman
Owner

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.

Activity

pinned this issue on Jun 24, 2020
changed the title [-][Help Wanted] Try the new native dependency checker[/-] [+]Try the new native dependency checker (Help Wanted)[/+] on Jun 24, 2020
mmikhan

mmikhan commented on Jun 28, 2020

@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

nklayman commented on Jun 29, 2020

@nklayman
OwnerAuthor

@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

mmikhan commented on Jul 1, 2020

@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

nklayman commented on Jul 1, 2020

@nklayman
OwnerAuthor

@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

romansp commented on Jul 2, 2020

@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

claudioluciano commented on Jul 6, 2020

@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

nklayman commented on Jul 7, 2020

@nklayman
OwnerAuthor

@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

claudioluciano commented on Jul 7, 2020

@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

nklayman commented on Jul 7, 2020

@nklayman
OwnerAuthor

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

nklayman commented on Jul 8, 2020

@nklayman
OwnerAuthor

@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

mmikhan commented on Aug 9, 2020

@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

nklayman commented on Aug 9, 2020

@nklayman
OwnerAuthor

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.

13 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @romansp@ejohnso49@mmikhan@gianlucamazzeo@Nisthar

        Issue actions

          Try the new native dependency checker (Help Wanted) · Issue #861 · nklayman/vue-cli-plugin-electron-builder