[StoryblokRichText] blok resolver not working with NextJS 15 / React 19

[wolfv]

Describe the issue you're facing

I am trying to embed some bloks inside my rich text in a NextJS 15 / React 19 application.

I always hit [ Server ] Component grid doesn't exist., even though the element is registered fine (and totally works outside of the RichText field).

I recreated the issue with the Next15 example from the playground, by adding a RichText component, adding a Grid block in the storyblok and observing the same issue.

import React from 'react';
import type { SbBlokData } from '@storyblok/react';
import { storyblokEditable, StoryblokRichText } from '@storyblok/react/rsc';

interface RichTextProps {
  blok: SbBlokData;
}

const RichText = ({ blok }: RichTextProps) => {
  return (
    <div {...storyblokEditable(blok)} key={blok._uid}>
        <StoryblokRichText doc={blok.text as any} />
    </div>
  );
};

export default RichText;

Another way of recreating this is by changing the following in the example code for the richtext:

  const doc = {
    "type": "doc",
    "content": [
      {
        "type": "paragraph",
        "content": [
          {
            "text": "This is some rich text. ",
            "type": "text"
          },
          {
            "text": "blablabla",
            "type": "text",
            "marks": [
              {
                "type": "bold"
              }
            ]
          }
        ]
      },
      {
        "type": "blok",
        "attrs": {
          "id": "1e6b3ae6-163b-4837-ad38-6da15aa3f637",
          "body": [
            {
              "_uid": "i-2c4913a6-845e-481f-b397-0b0cab06316b",
              "columns": [],
              "component": "grid",
              "_editable": "<!--#storyblok#{\"name\": \"grid\", \"space\": \"330386\", \"uid\": \"i-2c4913a6-845e-481f-b397-0b0cab06316b\", \"id\": \"641083779\"}-->"
            }
          ]
        }
      }
    ]
  };

Reproduction

#1374

Steps to reproduce

No response

System Info

Latest example from this repository

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[wolfv]

I am wondering if it would not make sense to use React's useContext to obtain the registered components from the Provider?

https://react.dev/reference/react/useContext

[alvarosabu]

Hi @wolfv so I finally figured out what the issue is. Under the hood, the React SDK uses StoryblokComponent inside the component resolver:

https://github.com/storyblok/storyblok-react/blob/0d4c18f6a467c7d436712281ea7f6504232baca4/src/richtext.ts#L6C1-L12C2

The problem is, if I understand correctly, for NextJS 15 / React 19 you need RSC components, so we will probably need to create a separate richtext component just for RSC (I need to discuss it with the team).

In the meantime as a workaround, you could overwrite the resolver by passing the RSC StoryblokServerComponent like this:

import { StoryblokRichText, BlockTypes, StoryblokServerComponent } from '@storyblok/react/rsc';


export default async function RichtextPage() {

  const myCustomResolvers = {
    [BlockTypes.COMPONENT]: (node) => {
      const body = node?.attrs?.body;
      return React.createElement(StoryblokServerComponent, {
        blok: Array.isArray(body) ? body[0] : undefined,
        key: node.attrs?.id,
      });
    }
  }
  
  return (
    <StoryblokRichText doc={content} resolvers={myCustomResolvers} />
  )
}

Let me know if the workaround works.