Search code examples
webpackwebpack-bundle-analyzer

How to force WebPack to use one version of module (instead of 6 different versions?)

In our project Webpack-bundle-analyzer plugin says that the bundle uses specific module (js file) 6 times.

enter image description here

What is the best way to make project as it used only one ( instead of multiple)? I know they might be from dependencies' depencendies, but how such problem should be solved?

I am OK with checking my APP manually for possible code-breaks, but the goal is surely to use one bn.js. Our package.json doesnt contain it in any dependencies directly.

Solution

  • This situation happens probably because your app (or it's dependencies) are requiring a different version of the same lib.

    It is not recommended to "force" the same version by hacking some Webpack's config (it is possible). There is a meaning to semantic versioning, if the lib bumped a major version, this means that it contains breaking changes.

    A better approach will be to manually align the version of the lib (or its consumer).

    You can run yarn why lib-name or npm ls lib-name which will print you a list of dependencies which are consuming the lib and at which version, this will help you to upgrade the dependencies in order to align the versions.

    If you still want to force, you can check these solutions https://github.com/webpack/webpack/issues/6505

    1. Using yarn resolutions to install only one version.
    2. Using webpack alias, to alias the lib-name to a specific path (each different version is installed in the consumer node_modules folder)
    3. Force webpack to resolve only from the app node_modules by
    // webpack.config.js
module.exports = {
  ...
  modules: [
    path.join(__dirname, '../node_modules')
  ]
  ...
}