Attempted to call the default export of from the server but it's on the client – Reactjs

The Problem:

You have a Next.js project with Resend and @react-email/components for email sending and styling. When trying to send an email using the sendEmail() action, an error is encountered: "Attempted to call the default export of /email/contact-form-email.tsx from the server but it’s on the client." The contact-form-email.tsx component is using @react-email/components for styling. Setting use client on the component causes another error related to importing tailwind CSS, and removing use server from the sendEmail.ts action results in an API key error. Your task is to help resolve these errors and guide the user on how to successfully send an email.

The Solutions:

Solution 1: Replace mjs with js and downgrade Tailwind version

To fix the error, you need to remove the use client; from the top of the contact-form-email.tsx file, and import Tailwind from tailwind instead of components. Also, downgrade the version of @react-email/tailwind to 0.0.8.

• In contact-form-email.tsx, replace:

import { Tailwind } from '@react-email/components';

with:

import { Tailwind } from '@react-email/tailwind';

• In package.json, update the version of @react-email/tailwind to ^0.0.8:

{
  "dependencies": {
    "@react-email/tailwind": "^0.0.8",
  }
}

After making these changes, the error should be resolved.

Solution 2: Specifying Server Components in next.config.js

Next.js allows you to specify which React packages should be treated as server components. This is necessary for server-side rendering of React components that are not part of the Next.js core library. In your case, you need to specify that the packages @react-email/components and @react-email/tailwind are server components.

To do this, add the following code to the experimental section of your next.config.js file:

module.exports = {
  experimental: {
    ...
    serverComponentsExternalPackages: [
      '@react-email/components',
      '@react-email/tailwind'
    ]
  }
};

This configuration tells Next.js that the specified packages should be treated as server components, enabling the use of these components in your server-side code. Once you have made this change, you should be able to call the default export of /email/contact-form-email.tsx from your server-side code without encountering the error message.

Solution 3: Import Tailwind styles from `react-email/components` to overcome the problem

Solution:

In the contact-form-email.tsx file, you had imported Tailwind from @react-email/tailwind. This caused an error when 'use client' was not set on the file. To fix the issue, import Tailwind styles from @react-email/components instead. Here’s the corrected version of the import statement:

import { ..., Tailwind } from "@react-email/components";

This change will ensure that the Tailwind styles are imported correctly and the error will be resolved.

Video Explanation: