Skip to content
JSX email

Frequently Asked Questions

You know the drill. Questions that get asked oodles

Dark and Light Mode

Email clients handle dark/light mode differently than web browsers. Key considerations:

  • Gmail and Outlook Windows have limited color-switching support
  • Different handling than web development

Recommended resources:

Preview App Deployment

Yes, you can deploy your own preview app! Use the CLI to build a custom, deployable preview app with your templates.

See CLI Documentation for details.

Gmail and Tailwind

Gmail has strict CSS class restrictions. When using the <Tailwind/> component:

<Tailwind production={true}>
  {/* Your email content */}
</Tailwind>

Setting production: true ensures Gmail compatibility by hashing and combining class names.

Monorepo Support

JSX-email works natively with most monorepo setups without additional configuration.

Next.js Build Issues

Error Description

If you encounter this error during Next.js builds:

8058.js from Terser
  x await isn't allowed in non-async function

This is a known issue with Next.js and Webpack related to server actions in client components.

Solutions

Option 1: Restructure Imports

Pass server actions through props:

page.jsx
import { MyForm } from './MyForm';
import { myEmailAction } from './myEmailAction';


export async function Page() {
  return <MyForm action={myEmailAction} />;
}
MyForm.jsx
'use client';
export function MyForm({ action }) {
  // Note the passing of `action` as a prop
  return <form action={action}>...</form>;
}
myEmailAction.js
'use server';
import { render } from 'jsx-email';
import { MyEmail } from '@/emails/MyEmail';


export async function myEmailAction() {
  const body = await render(<MyEmail />);
  // ...
}

Option 2: Disable ESM Externals

Modify next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    esmExternals: false
  }
};


module.exports = nextConfig;

How do I use React context?

Import context helpers from jsx-email instead of from React.

import { createContext, useContext } from 'jsx-email';

Need More Help?

If your question isn’t covered here:

  1. Check these resources:

  2. For code issues, provide a reproduction:

  3. Include reproduction link with your question