Best way to tell Webpack to use the "esm5" exports?

[nfarina]

I am using Webpack to bundle for a pretty old browser (Chrome 54) that we are stuck with supporting on some Android handhelds that we don't control.

After upgrading to v9 and shifting to the "compat" imports (for now), I have noticed that Webpack very aggressively chooses a version of the precompiled Firebase libs that Chrome 54 does not support (index.esm2017.js and friends).

We need Webpack to select the index.esm5.js modules instead. It looks like the various package.json in Firebase are attempting to expose them by using the new exports field:

"exports": {
    ".": {
      "require": "./dist/index.cjs.js",
      "esm5": "./dist/esm/index.esm5.js",
      "lite": "./dist/index.lite.js",
      "liteesm5": "./dist/index.lite.esm5.js",
      "default": "./dist/esm/index.esm2017.js"
    },
    "./package.json": "./package.json"
  },

My question is, how can I tell Webpack to search for this esm5 key when it's available? Right now, the only way I can make this work is by instructing Webpack to ignore exports entirely and instead look for the esm5 top-level field:

module.exports = {
  ... webpack config ...
  resolve: {

  // Prefer Firebase package's "esm5" fields which point to modules that
  // work in our target browser (Chrome 54).
  mainFields: ["esm5", "browser", "module", "main"],

  // Disable the newer "exports" field found in newer package.json files,
  // because Firebase's packages will direct Webpack to the es2017 modules
  // which break on our target browser (Chrome 54).
  exportsFields: [],
};

This works, but doesn't feel quite correct - it means package.exports will always be ignored for all libraries, not just Firebase. Is there a better way to accomplish this?

I should clarify that the reason I'm asking this here instead of on Webpack's repo is because I feel like there was a reason for these "esm5" entries in exports and would like to know what the intent was.

[hsubox76]

Looking at the webpack docs, it looks like the field to use is resolve.conditionNames: https://webpack.js.org/configuration/resolve/#resolveconditionnames

The webpack docs also have this table of how to access condition names in different tools if possible, which is handy and I will put the link here for myself and any others: https://webpack.js.org/guides/package-exports/#conditions-custom

[nfarina]

Awesome!! Thank you so much for pointing out this field—I had looked through any fields with "export" in the name and missed this one.

Now I have this in my resolve which works just as well and seems much more correct:

const resolve = {
  // Prefer Firebase package's "esm5" exports which point to modules that
  // work in our target browser (Chrome 54).
  conditionNames: ["esm5", "import", "require", "default"],
};