strapi / blocks-react-renderer

A React renderer for the Strapi's Blocks rich text editor
Other
158 stars 24 forks source link

[bug]: Cannot pass custom components in server-side components in NextJS #47

Open wzrdx opened 2 months ago

wzrdx commented 2 months ago

What version of @strapi/blocks-react-renderer are you using?

"@strapi/blocks-react-renderer": "^1.0.1",
"react": "^18.3.1"

What's Wrong?

I am trying to use the BlocksRenderer inside a server component in my NextJS app. I want to pass a custom component for links.

<BlocksRenderer
    content={article.attributes.Content}
    blocks={{
        link: ({ children, url }) => (
            <Link href={url} target="_blank">
                {children}
            </Link>
        ),
    }}
/>

I get the following error:

⨯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {link: function link}
         ^^^^^^^^^^^^^
    at stringify (<anonymous>)

To Reproduce

Create a NextJS app using the /app router and create a new page (page.tsx).

Render the BlocksRendered inside of it and try to pass a custom component.

Expected Behaviour

The page should render without errors.

castulo commented 2 months ago

I'm having the same issue

05August commented 1 month ago

I created a client component for rendering block content.

example: https://strapi.io/blog/integrating-strapi-s-new-rich-text-block-editor-with-next-js-a-step-by-step-guide


import Image from "next/image";

import {
  BlocksRenderer,
  type BlocksContent,
} from "@strapi/blocks-react-renderer";

export default function BlockRendererClient({
  content,
}: {
  readonly content: BlocksContent;
}) {
  if (!content) return null;
  return (
    <BlocksRenderer
      content={content}
      blocks={{
        image: ({ image }) => {
          console.log(image);
          return (
            <Image
              src={image.url}
              width={image.width}
              height={image.height}
              alt={image.alternativeText || ""}
            />
          );
        },
      }}
    />
  );
}