Server Side Import

[mweel1]

I am trying to import this on the serverside and am getting the following error.

import { Html } from "@react-email/html";

         ^^^^
SyntaxError: The requested module '@react-email/html' does not provide an export named 'Html'
    at ModuleJob._instantiate (internal/modules/esm/module_job.js:92:21)
    at async ModuleJob.run (internal/modules/esm/module_job.js:107:20)
    at async Loader.import (internal/modules/esm/loader.js:179:24)

[bukinoshita]

Do you have a repo/codesandbox to reproduce this?

[zenorocha]

Closing due to inactivity.

[kentcdodds]

The issue here is trying to use this module in a Native ESM context. In a Native ESM application, you'd have to import the file in the dist directory (including the file extension). The solution is to use the package.json exports config. Radix had a similar problem recently and solved it that way: https://github.com/radix-ui/primitives/blob/main/packages/react/checkbox/package.json#L5

[dawnmist]

There is a repository that has a repro at: https://github.com/dawnmist/react-email-issue-513

This was created from Kent's Epic Stack, then modified to add react-email and a single email template.

Steps to see the error:

• clone the repository
• npm install
• npm run build
• npm run start

The dev server (npm run dev) hangs at the point where it is supposed to be compiling the application - the compile error isn't being shown but the compile doesn't succeed and the server continues waiting for it. When running with mocks (npm run start:mocks) the error is also not shown but the server itself doesn't function. When running the server on its own the import error is surfaced to the user, finally explaining why the dev server and server with mocks were hanging.

[dawnmist]

I can confirm that adding:

"exports": {
   ".": {
     "import": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.mjs"
     },
     "require": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   }
 },

to the package.json file for the @react-email/components package allows me to successfully import components using native esm imports.

Given that the various component packages can be individually used rather than always through the @react-email/components package, each of them would also need to have the equivalent update in their package.json file so that they can still be used individually when using native esm imports.

[dawnmist]

Note: I discovered later that the exports in the package.json file had broken the email dev server, giving the error message "Module not found: Default condition should be last one" pointing to the line where components were being imported from @react-email/components.

What caused it was that I had the "types" and "default" conditions in the json snippet above the wrong way around.

I've fixed the snippet above so that the default value being specified for the import and require sections is the last condition so if anyone else comes across the thread they don't copy/paste the wrong information, and the email dev server is working again - but I wanted to highlight that it's important that default lines come last in their sections otherwise the nextjs server will be unable to load the email templates.