Why webpack is including node_modules of dependency?

Question

I have two modules inside the same directory, managed both by lerna js. One of them is a library that others module includes. Both of them packed by webpack following webpack library authoring.

But, when I launch webpack in the app dir, the process includes all library/node_modules dependencies inside the app, for example vue.js. In library vue is "devDependency" while in the app is "dependencies". This implies two Vue context in navigator. Somebody known why?

Thanks.

Answer 1

You need to add an alias:

module.exports = {
...
....
},
resolve: {
    modules: ["node_modules",
    alias: {
        'vue$': 'vue/dist/vue',
        'jquery': 'jquery/dist/jquery.min.js'
    }
},
...

Answer 2

Thanks to @evocateur

"Node resolves symlinks when requiring, which means libraries (like React and Vue) that are singletons will break. You need to add resolve.alias webpack config so it always chooses the "root" node_modules packages."

Putting in webpack following works perfectly in resolve.alias:

vue: path.resolve(__dirname, './node_modules/vue/')

Answer 3

Ensure that your webpack configurations for both the library and the app are set up correctly. Pay special attention to the externals configuration in your library's webpack config. This configuration allows you to specify dependencies that should not be bundled with your library. Externalize Dependencies:

In your library's webpack configuration, mark Vue.js as an external dependency. This means that when the library is bundled, it won't include Vue.js, and it will expect the app to provide it.

// In your library's webpack.config.js
module.exports = {
  // ...
  externals: {
    vue: 'Vue', // Assuming Vue is available as a global variable
  },
};