publish package so both `esm` and `cjs` can co-exist with the same imports

[IanEdington]

currently the package publishes esm and cjs seperately. This results in import statements like the following:

cjs

import { render } from "@faire/mjml-react/renders";

esm

import { render } from "@faire/mjml-react/esm/renders";

Is there some way to have the folders merged with both an esm and cjs version available?
Would it make sense to prioritize one and allow the other to use an alias? ie. cjs is in root and esm is a directory in root? done

import { render } from "@faire/mjml-react/renders";

split out from #64

[eddeee888]

Hello 👋 Would using (package.json).exports work? e.g.

{
  "name": "@faire/mjml-react",
  ...
  "exports": {
    "renders": {
      "import": "./dist/esm/utils/render.js",
      "require": "./dist/src/utils/render.js",
      "types": "./dist/src/utils/render.d.ts"
    }
  }
}

The above config should allow importing from @faire/mjml-react/renders (I haven't tried this myself though)

Here's the resources I looked through for the config:

• https://antfu.me/posts/publish-esm-and-cjs
• https://medium.com/swlh/npm-new-package-json-exports-field-1a7d1f489ccf

[emmclaughlin]

Thanks @eddeee888! Thank is on the right track, but unfortunately I think it is a bit tricky to implement a solution that works for everything. We have that exact setup for the main package.json (i.e. all the Mjml* components) but to get all of the utils/extension files also exported in that way I think we would need to 1) update the file structure (see #77) and then 2) create a package.json for each file we want to easily export esm and cjs version of and place it in the right folder. Ideally the finall solution is importing from @faire/mjml-react/utils/render will automatically resolve esm and cjs

[IanEdington]

Did some reading on this and it seems like the conditional exports would work well for us

https://nodejs.org/api/packages.html#conditional-exports

This is a very interesting writeup on some of the pitfalls of including both ESM and CJS modules in the same package: https://nodejs.org/api/packages.html#dual-commonjses-module-packages

Fortunately we don't manage state in this library so it should be fine to have both.