Error: Unknown block type "youtube", please specify a serializer for it in the `serializers.types` prop

[humbernieto]

Please how can I paint a youtube video through react-portable-text with nextjs and typescript, I'm following this guide https://www.sanity.io/guides/portable-text-how-to-add-a- custom-youtube-embed-block but I have the following Error: Unknown block type "youtube", please specify a serializer for it in the serializers.types prop Thank you very much infinite...

[LPRegen]

Hi, I will assume that you created a schema just like on the page.
You have to create a new property with the name of the schema in the serializer. If the schema name is 'youtube', you will have to add it to the serializers.

import PortableText from "react-portable-text"

const YourComponent = ({ portableTextContent }) => (
  <div>
    <PortableText
      content={portableTextContent}
      serializers={{
        h1: (props) => <h1 style={{ color: "red" }} {...props} />,
        li: ({ children }) => <li className="special-list-item">{children}</li>,
        
        youtube: YourYouTubeComponent, // < -- Here, assuming that your schema is named 'youtube'
        
      }}
    />
  </div>
)

Hope it helped.