Why does a dependency gets duplicated?

• Sometimes, different libraries use different versions of this dep. Eg. your app uses core-js v3 but fbjs uses core-js v1
• Sometimes, there’re different editions of the dep, eg, your app uses lodash-es but babel uses lodash

How to check if you have duplicated dependencies

• Run webpack-bundle-analyzer and look around for similar library names (eg lodash/lodash-es)
• Install duplicate-package-checker-webpack-plugin, do a build, and check the output

How to understand why a package is bundled multiple times

• Run yarn why <package-name> This will show you all versions of the package – and why they are installed
• Use webpack analyse
  • Run a webpack build with --profile --json
  • Upload the JSON
  • Find your module, click on it, and you’ll see the reason it’s bundled

How to deduplicate duplicated packages:

• Use webpack’s resolve.alias to deduplicate dependencies
• Use yarn resolutions to force Yarn to install only a single version of the package