provide module, main and browser fields that satisfy esm, commonjs and bundlers

I have a number of published npm packages that I have upgraded to provide both commonjs and esm builds. Some of the packages might be for both node and the browser. All packages compiled with webpack or rollup. All are written in typescript and transpiled into a dist directory.

I create a commonjs index.js file that looks like this:

 'use strict'
  
  if (process.env.NODE_ENV === 'production') {
    module.exports = require('./react-abortable-fetch.cjs.production.min.js')
  } else {
    module.exports = require('./react-abortable-fetch.cjs.development.js')
  }

I set the package.json main field to the above index.js file.

I also generate a .esm.js file for each package and I set both browser and module fields to the esm.js file and set the type file to be module.

The end result is something like this:

  "type": "module",
  "main": "dist/index.js",
  "browser": "dist/react-abortable-fetch.esm.js",
  "module": "dist/react-abortable-fetch.esm.js",
  "types": "dist/index.d.ts",

The problem with this approach is that only esm packages can consume it (unless I am wrong).

What is the best way to configure the package.json file so that packages that have not made the leap yet (and that is quite a few) can still consume the package?

from provide module, main and browser fields that satisfy esm, commonjs and bundlers