Nuxt•4w ago

Using React-Email with Nuxt

Hey all, I'm working on a project where I need to render some transactional emails and have found that I really like React-Email as a of writing said emails. I have already configured vite to use the react plugin like so:

  vite: {
    plugins: [
      tailwindcss(),
      react({
        jsxImportSource: "react",
        jsxRuntime: "automatic",
        include: ["*.tsx"],
      }),
    ],
  },

  vite: {
    plugins: [
      tailwindcss(),
      react({
        jsxImportSource: "react",
        jsxRuntime: "automatic",
        include: ["*.tsx"],
      }),
    ],
  },

And I have a test endpoint named test.tsx with the following content:

import { sendEmail } from "~/lib/emails";

export default defineEventHandler(async (event) => {
  await sendEmail("matt");
  return "";
});

import { sendEmail } from "~/lib/emails";

export default defineEventHandler(async (event) => {
  await sendEmail("matt");
  return "";
});

and sendEmail does this:

export const sendEmail = async (name: string) => {
  const body = await render(<WelcomeEmail name={name} />);

  await transport.sendMail({
    from: env.SMTP_FROM,
    to: "test@example.com",
    subject: "Welcome",
    html: body,
  });
};

export const sendEmail = async (name: string) => {
  const body = await render(<WelcomeEmail name={name} />);

  await transport.sendMail({
    from: env.SMTP_FROM,
    to: "test@example.com",
    subject: "Welcome",
    html: body,
  });
};

but when I try to send a request to that endpoint, I get the following error:

{
  "error": true,
  "url": "http://localhost:3000/api/test",
  "statusCode": 500,
  "statusMessage": "Server Error",
  "message": "h is not defined",
  "stack": [
    "h is not defined",
    "at sendEmail (/Users/matteo/Dev/Perso/nuxt-and-bolts/app/lib/emails/index.tsx:19:16)",
    "at Object.handler (/Users/matteo/Dev/Perso/nuxt-and-bolts/server/api/test.tsx:4:1)",
    "at /Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/h3@1.15.4/node_modules/h3/dist/index.mjs:1932:43)",
    "at process.processTicksAndRejections (node:internal/process/task_queues:105:5)",
    "at async file:///Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/h3@1.15.4/node_modules/h3/dist/index.mjs:2004:19)",
    "at async Object.callAsync (/Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/unctx@2.4.1/node_modules/unctx/dist/index.mjs:72:16)",
    "at async Server.toNodeHandle (/Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/h3@1.15.4/node_modules/h3/dist/index.mjs:2296:7)"
  ]
}%

{
  "error": true,
  "url": "http://localhost:3000/api/test",
  "statusCode": 500,
  "statusMessage": "Server Error",
  "message": "h is not defined",
  "stack": [
    "h is not defined",
    "at sendEmail (/Users/matteo/Dev/Perso/nuxt-and-bolts/app/lib/emails/index.tsx:19:16)",
    "at Object.handler (/Users/matteo/Dev/Perso/nuxt-and-bolts/server/api/test.tsx:4:1)",
    "at /Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/h3@1.15.4/node_modules/h3/dist/index.mjs:1932:43)",
    "at process.processTicksAndRejections (node:internal/process/task_queues:105:5)",
    "at async file:///Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/h3@1.15.4/node_modules/h3/dist/index.mjs:2004:19)",
    "at async Object.callAsync (/Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/unctx@2.4.1/node_modules/unctx/dist/index.mjs:72:16)",
    "at async Server.toNodeHandle (/Users/matteo/Dev/Perso/nuxt-and-bolts/node_modules/.pnpm/h3@1.15.4/node_modules/h3/dist/index.mjs:2296:7)"
  ]
}%

tsconfig has also been updated to look like the following:

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "allowJs": true,
    "strict": true
  }
}

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "allowJs": true,
    "strict": true
  }
}

Have I forgotten to do something? Can it even be done?

6 Replies

kapa.ai•4w ago

Hi @Matteo G. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about integrating React-Email or rendering React components (like React-Email templates) within a Nuxt (Vue-based) server environment. The available documentation covers using JSX/TSX in Nuxt for Vue components, configuring Vite plugins for Vue and Vue JSX, and server endpoints using the Nitro engine, but does not address using React or React-based libraries (such as React-Email) in server routes or API handlers. The error message "h is not defined" suggests that the React runtime required for rendering React components is not available or not properly configured in the Nuxt server context. However, there is no guidance in the provided sources on how to resolve this or whether such an integration is officially supported. If you need to render React components on the server in a Nuxt project, you may need to look for community solutions or consider a different approach, as the official Nuxt documentation and related sources do not cover this scenario. If you have further questions about using JSX/TSX with Vue in Nuxt, that is supported and documented, but React-specific server-side rendering is not addressed in the knowledge sources providedJSX / TSX in Nuxt Vite configuration in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@189947320261935105> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Matteo GOP•4w ago

@kapa.ai could this be more of a nitro issue ? since it's a server endpoint and all that

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, Nitro is indeed the server engine that powers Nuxt's server endpoints, including those in the server/api/ directory. Nitro handles server-side rendering, API routes, and middleware, and it is responsible for executing the code in your server endpoints Server Engine Server Endpoints & Middleware. However, the error you're encountering ("h is not defined") is related to the React runtime not being available in the Nitro (server) context. While Nitro supports running TypeScript and even JSX/TSX (for Vue), there is no documentation or indication in the knowledge sources that Nitro or Nuxt natively support rendering React components or running React-based libraries like React-Email in server endpoints. The Vite configuration in Nuxt is primarily designed for Vue and its ecosystem, not React. So, while Nitro is responsible for running your server endpoint, the root cause of your issue is that the React runtime (and its h function) is not set up or available in the Nitro context. The knowledge sources do not provide a solution or official support for this use case. Summary:
This is not a Nitro bug, but rather a limitation of using React (and React-Email) in a Nuxt/Nitro server environment, which is not officially supported or documented in the provided sources. If you need to use React-Email, you may need to set up a separate Node.js service or explore other workarounds outside of Nuxt/Nitro's standard capabilities Server Engine Server Endpoints & Middleware. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@189947320261935105> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Matteo GOP•4w ago

Solved this by compiling the templates and using the compiled version in the endpoint

Gaming

Programming

Using React-Email with Nuxt

Did you find this page helpful?