De-Duplicate libraries in app within deeply nested node modules

Question

I have a app in which i can add modules as node_modules. Now, these modules and app uses a library XYZ as node module. Also, these modules have other node modules which has their own library XYZ as a node module.

So, this is roughly how the structure of my app looks like

I use gulp and webpack and i am trying to some how de-duplicate library XYZ. I want to build a task that would go through this nested tree of node modules and build out 1 common version of library XYZ. How can I achieve that?

I tries using deDupePlugin, where this is all i added to my gulp default task and it did not work.. Is there anything i missed?

plugins: [
            new webpack.optimize.DedupePlugin()
           // new CommonsChunkPlugin("commons", "commons.js")
        ],

OR, is there any other way to achieve that? Any help will be really appreciated

Lisk

Please note that these node modules are being fetched from projects that I do not control. So, there is no way to alter them. Also, having multiple instances of libraryXYZ is creating problem as 1 session of my app should have 1 libraryXYZ only. – Lisk

Answer 1

DedupePlugin will only dedupe files that are completely equal. Your modules might depend on different versions of the library, which is why it might not always get deduped. And even when files are deduped, the modules themselves won't be, so your requirement of a single instance won't be satisfied.

You can use resolve.alias to redirect all require('libraryXYZ') calls to the same top-level instance.

resolve: {
  alias: {
    libraryXYZ: require('path').resolve('./node_modules/libraryXYZ'),
  },
},

Here is a comparison repository I made that showcases different ways to dedupe a module.

Zingale