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

A

3

6

Complete Error:

Attempted to call the default export of /email/contact-form-email.tsx from the server but it's on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.

I'm using Next.js 13 server actions to send email. Packages I'm using are

"resend": "^0.16.0"
"@react-email/components": "^0.0.7"

for email service and styling the email.

The sendEmail.ts action file looks like

'use server'

import React from 'react';
import { getErrorMessage, validateData } from '@/lib/utils';
import { Resend } from 'resend';
import ContactFormEmail from '@/email/contact-form-email';

const resend = new Resend(process.env.RESEND_API_KEY);
export const sendEmail = async(formData : FormData) => {
    const senderEmail = formData.get('senderEmail'); 
    const contactMessage = formData.get('contactMessage');


    try {
      console.log('sender email : ' + senderEmail);
      console.log('contact message : ' + contactMessage);
      
      resend.emails.send({
        from: 'Contact form  <[email protected]>',
        to: '[email protected]',
        subject: 'Message from contact form of portfolio.',
        reply_to: senderEmail as string,
        react : React.createElement(ContactFormEmail, {
          contactMessage: contactMessage as string, 
          senderEmail : senderEmail as string, 
        })
      });
    } catch (error : unknown) {
      return {
        error: getErrorMessage(error)
      }
    }
}

and the contact-form-email.tsx that uses react-email for styling is

'use client'

import React from 'react'
import {
    Html,
    Body,
    Head, 
    Heading,
    Hr,
    Container,
    Preview,
    Section,
    Text
} from '@react-email/components'
import { Tailwind } from '@react-email/tailwind'

type ContactFormEmailProps = {
    contactMessage : string,
    senderEmail : string, 
}

function ContactFormEmail({contactMessage, senderEmail } : ContactFormEmailProps) {
  return (
   <Html>
    <Head/>
    <Preview>New message from you portfolio site</Preview>
    <Tailwind>
        <Body>
            <Container>
                <Section>
                    <Heading>You received the following message from the contact form</Heading>
                    <Text>{contactMessage}</Text>
                    <Hr/>
                    <Text>The sender's email is : {senderEmail}</Text>
                </Section>
            </Container>
        </Body>
    </Tailwind>
   </Html>
    
  );
}

export default ContactFormEmail

If I don't set 'use client' on contact-form-email.tsx then another error pops up

The error was caused by importing '@react-email/tailwind/dist/index.mjs' in './email/contact-form-email.tsx'.

Maybe one of these should be marked as a client entry "use client":
./email/contact-form-email.tsx ./actions/sendEmail.ts

And if I don't set the sendEmail.ts as 'use server' then it shows an issue with reading API key

Error: Missing API key. Pass it to the constructor new Resend("re_123")

Aves answered 27/9, 2023 at 18:39 Comment(0)

T

0

To fix the issue you need to remove the use client; from the top, and import Tailwind from tailwind instead of components but use the 0.0.8 version and it should work as intended.

contact-form-email.tsx

import { Tailwind } from "@react-email/tailwind"

package.json

"@react-email/tailwind": "^0.0.8",

Tadich answered 5/10, 2023 at 15:47 Comment(0)

C

0

Specify in next.config.js that these are server components:

 experimental: {
  ...
  **serverComponentsExternalPackages: [
    '@react-email/components',
    '@react-email/tailwind'
]**
}

Cryometer answered 19/11, 2023 at 11:21 Comment(0)

N

-1

I had the same issue and I did not find a solution for it. For now I just commented out the Tailwind component

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

EDIT

Importing Tailwind from @react-email/components instead of @react-email/tailwind seems to fix the issue.

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

Nordic answered 3/10, 2023 at 22:42 Comment(0)

Recommended topics

Hot tags