Question 258976 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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")

Tags:

2

Answers


  1. 0

    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";
    Login or Signup to reply.
  2. 0

    it helps me too.

    import { ..., Tailwind } from "@react-email/components";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search