I have two Vue 3 projects - a library and a main project.
Library
I build this project as Vue 3 library
vue-cli-service build --target lib --name index src/index.common.ts
In this project I use js-joda:
"dependencies": {
"@js-joda/core": "^5.2.0",
...
}
in order to remove node_modules of the library from webpack bundle I do the following in the library vue.config.js:
const nodeExternals = require('webpack-node-externals');
...
configureWebpack: config => {
config.target = 'node';
config.externalsPresets = { node: true };
config.externals = [nodeExternals()];
},
Main project
I also use js-joda in this project and as my library is local I have the following in package.json:
"dependencies": {
"@js-joda/core": "^5.2.0",
"my-lib": "file:./../../my-lib",
...
}
Problem
When I build main project, with the configuration I described above, two versions of js-joda library are included in JS bundles . One version is taken from main-project/node_modules and another from my-lib/nodes_modules. As a result I have different function instances with the same name what gives me wrong results in my code.
If I remove my-lib/nodes_modules before building main project then everything is ok. However, to do it every time before building main project isn't a good solution. Besides I work at two projects simultaneously.
Could anyone say, how I can hide my-lib/nodes_modules from main project in a better way?
In your library, you should list js-joda under peerDependencies while in your main project you should list js-joda under dependencies.
For more information - https://nodejs.org/es/blog/npm/peer-dependencies/