Closed
Description
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
[-][Help Wanted] Try the new native dependency checker[/-][+]Try the new native dependency checker (Help Wanted)[/+]mmikhan commentedon Jun 28, 2020
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.
Whenever I remove the native dependency reference from the code, the warnings disappear. I tried with the
experimentalNativeDepCheck: true
check invue.config.js
.nklayman commentedon Jun 29, 2020
@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 commentedon Jul 1, 2020
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:Looks like it's related #776 and was fixed here but still appearing.
nklayman commentedon Jul 1, 2020
@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 commentedon Jul 2, 2020
With
experimentalNativeDepCheck: true
I see the following warning during bundling: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 commentedon Jul 6, 2020
It's not working for me.
I'm using neon-binding to create the native module.
nklayman commentedon Jul 7, 2020
@claudioluciano is the native module in
node_modules
or in a sperate folder? If it's innode_modules
, can you post the list of files in it (ls node_modules/module-name
)?claudioluciano commentedon Jul 7, 2020
@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
filenklayman commentedon Jul 7, 2020
The new checker won't work for
.node
files as it looks for abindings.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 yourexternals
array.nklayman commentedon Jul 8, 2020
@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 commentedon Aug 9, 2020
@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:Separate issue
I found something else now. The new
experimentalNativeDepCheck: true
in thevue.config.js
doesn't work when a non-native dependency has a native peer dependency. However, the oldexternals: ['']
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 thevue.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
App.vue
background.js
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
I hope that it helps you to find the root cause of the issue ✌️
nklayman commentedon Aug 9, 2020
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