Deduping ESM and CJS versions of the same package

[valeriangalliat]

Feature request

What is the expected behavior?

When part of the codebase import 'some-dep' and transient dependencies require('some-dep'), and some-dep's package.json looks like this:

{
  "exports": {
    ".": {
      "browser": {
        "require": "./dist/browser-cjs/index.js",
        "import": "./dist/esm2017/index.js"
      },
      "default": "./dist/esm2017/index.js"
  }
}

As it's the case with most @firebase/* packages - this results in both dist/browser-cjs/index.js and dist/esm2017/index.js to be included separately.

In this situation, it would be nice to have a way to force using the same dist file to minimize bundle size.

What is motivation or use case for adding/changing the behavior?

Minimizing bundle size.

How should this be implemented in your opinion?

Not sure, and not even sure if it's fixable, I just want to start the conversation about this issue

[valeriangalliat]

OH just found out about resolve.conditionNames

I was able to solve this by using

{
  resolve: {
    conditionNames: ['import', 'default'],
  }
}

[valeriangalliat]

Actually I'm realizing this break some packages... I think I would need more of a cherry picking approach, e.g. applying a custom conditionNames only for a specific list of dependencies that I know will play well with that.

I'm thinking maybe there's a way to write a Webpack plugin for this? Would love a few pointers on how to achieve that, I can't figure how to hook to dynamically transform any dependency's package.json exports before Webpack uses it for resolving

[alexander-akait]

As it's the case with most @firebase/* packages - this results in both dist/browser-cjs/index.js and dist/esm2017/index.js to be included separately.

Why? Do you use traspilation? If you will have import ... from "package" everywhere you will use /dist/esm2017/index.js and don't have multiple copies (same for require), check your configuration. You don't need to use conditionNames or create a plugin

[valeriangalliat]

Everywhere I use import ... from '@firebase/...' it does use the esm2017 build, but I do use other dependencies (in particular next-firebase-auth) that itself uses require('@firebase/...') and that results in the browser-cjs build to be included as well

FWIW next-firebase-auth's source code uses TypeScript with import, but then they also use Webpack on their side to produce the dist file which is CJS only. I tried forking it to make Webpack output import statements but it seems quite involved as it implies turning the whole package into a ESM module

So far I've come up with a solution using config.reslove.alias

config.resolve.alias = {
  '@firebase/auth': 'path/to/node_modules/@firebase/auth/dist/esm2017/index.js',
  '@firebase/app': 'path/to/node_modules/@firebase/app/dist/esm2017/index.js',
  // 27 more
}

[alexander-akait]

This is solution too, we also have https://webpack.js.org/plugins/normal-module-replacement-plugin/, so it can be use too

[valeriangalliat]

Related: #15967