ESM build is not working

[kasperpeulen]

• Component or Package Name: @jsx-email/all (but for others the same apply)
• Component or Package Version: 2.0.2
• @jsxp-email/cli Version?: Not used
• Operating System (or Browser): OSX
• Node Version: v18.18.0
• Link to reproduction (⚠️ read below): https://stackblitz.com/edit/stackblitz-starters-ksqowi?file=index.js

Expected Behavior

I should be able to run jsx-email in node in projects that are "type:module":

{
  "type": "module",
  "dependencies": {
    "@jsx-email/all": "^2.0.1"
  }
}

Actual Behavior

I get an error:

file:///Users/kasperpeulen/code/modern-web-app/bla.js:1
import {renderAsync} from '@jsx-email/all';
        ^^^^^^^^^^^
SyntaxError: Named export 'renderAsync' not found. The requested module '@jsx-email/all' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@jsx-email/all';
const {renderAsync} = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Node.js v18.18.0

Additional Information

I think this can be fixed by making sure that the ESM build outputs .mjs files.

I tried renaming the esm output files locally in node_modules and that worked.

[shellscape]

This is not the fault of jsx-email. We export both ESM and CJS. Please fill out the entire issue template next time.

[kasperpeulen]

Added a repro @shellscape

[shellscape]

Your reproduction doesn't show an error on my end. Looks like it's working fine.

[kasperpeulen]

@shellscape I added now a stackblitz start command (node index.js), you should see:

[shellscape]

OK thanks we'll take a look

[shellscape]

I've managed to reproduce this locally. ESM is such a pain. It may be a bit before we roll out a fix for this, it requires altering how our build process works significantly. If you can use TypeScript, I'd recommend doing so.

[kasperpeulen]

I think if you want to use typescript, the steps could be.

1. Place an extra package.json file in the dist/es directory. With as only content:

   {
   "type": "module",
   }

   This avoid having to manually rename js files to mjs files.

2. Change the moduleResolution to node16
3. Add .js file extensions to all relative imports in the source code. For example: export * from './body.js';

[shellscape]

alright, we're going to completely change up our build process in the next few days which should resolve this.

[shellscape]

the next few days turned into a week. haven't forgotten about it, just got swamped with work. going to run some tests this evening.

[shellscape]

@kasperpeulen should be resolved now. cheers

[alexanderson1993]

Hey, huge thanks for putting in the work to do this. You just unblocked me shipping the next version of my personal newsletter platform. Can't wait for my emails to look ✨ beautiful ✨!