How to tell webpack to bundle using the ESM version of a dependency instead of the CJS

Question

We use react-native-web-lottie which is distributed in two versions:

• dist: format CJS
• src: format ESM

The beggining of their package.json looks like:

  "name": "react-native-web-lottie",
  "version": "1.4.4",
  "description": "React Native for Web implementation of Lottie",
  "main": "dist/index.js",
  "main-es": "src/index.js",
  "module": "src/index.js",

By default, our webpack configuration here will bundle the CJS.

We want to take benefits of tree shaking to optimize our bundle size, I believe this can be done only through ESM module.

How can I tell Webpack to bundle using the ESM module, do tree shaking, and distribute the final webapp bundle into CJS?