Error: Cannot access default.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. #1722

Gkibify · 2024-10-09T04:45:29Z

Describe the Bug

Hello, I am trying to use the content of zustand's store in the email component to dynamically render the template and obtain HTML through rendering, but an error occurred. Here is some of my code:

Email Template Code：

"use client";

const EmailComponent = () => {
  const { contentObj } = useEmailStore(
    useShallow((state) => ({
      contentObj: state.contentObj,
    }))
  );

  return (
    <Html>
      <Head />
      <Tailwind>
        <Body className="bg-white my-auto mx-auto font-sans px-2">
          <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] max-w-[465px]">
            {renderChildren(contentObj)}
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

Here is the HTML code to obtain：

import { render } from "@react-email/components";

import EmailComponent from "./component/EmailComponent";

const EmailPage = async () => {
  const html = await render(<EmailComponent />, {
    pretty: true,
  });

  return (
    <div className="basis-1/2">
      <iframe className="w-full h-full" srcDoc={html}></iframe>
    </div>
  );
};

export default EmailPage;

Which package is affected (leave empty if unsure)

No response

Link to the code that reproduces this issue

no

To Reproduce

直接访问当前页面出现错误

Expected Behavior

不出现错误，获取到html

What's your node version? (if relevant)

No response

gabrielmfern · 2024-11-19T14:15:07Z

So sorry, but we need a proper reproduction for this if we are going to look into fixing. What you should do is create a new, blank project, and then write down the minimal amount of code that gets you the same error, once you do, push it to GitHub and share a link here.

Gkibify added the Type: Bug Confirmed bug label Oct 9, 2024

gabrielmfern added App: Preview Package: react-email This is the CLI we generally use as just `email` on the temrinal. labels Oct 14, 2024

gabrielmfern added the Resolution: Needs More Information More information is needed on this issue label Nov 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error: Cannot access default.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. #1722

Error: Cannot access default.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. #1722

Gkibify commented Oct 9, 2024

gabrielmfern commented Nov 19, 2024

Error: Cannot access default.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. #1722

Error: Cannot access default.prototype on the server. You cannot dot into a client module from a server component. You can only pass the imported name through. #1722

Comments

Gkibify commented Oct 9, 2024

Describe the Bug

Which package is affected (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Expected Behavior

What's your node version? (if relevant)

gabrielmfern commented Nov 19, 2024