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.

[anajavi]

Now that node can require esm from commonjs, would it be possible to release this library as esm-only?

It would make tooling quite simple here.

[hdransfeld]

Just hit this building a library with Vite that depends on @faire/mjml-react. The CJS require("react") from mjml-react's subpath files survives into our bundle and crashes any Node ESM consumer of our library.

Error: Calling require for "react" in an environment that doesn't expose the require function.

Concretely the issue seems to be causes by the extensions and utils subpaths:

Import	Resolves to
@faire/mjml-react	esm/index.js ✅
@faire/mjml-react/extensions	extensions/index.js ❌ (CJS)
@faire/mjml-react/utils/renderToMjml	utils/renderToMjml.js ❌ (CJS)

The ESM files under esm/extensions/ and esm/utils/ exist but seem unreachable via the public import path.

Wouldn't an exports map mirroring the existing layout (import → esm/..., require → current paths) fix this issue?

[anajavi]

I made a PR #155 to publish this as ESM only. I don't think making a ESM/CJS dual package is worth the complexity anymore.