Get help on Discord

Portable Text "Unknown block type 'code'" despite adding serializer

9 replies
Last updated: Feb 3, 2021
Hello all! I’m trying to render a code block in a Portable Text Block, followed the instructions to add the serializer and still gives me the Unknown block type “code”, please specify a serializer for it in the 
serializers.types
prop
import BlockContent from '@sanity/block-content-to-react'
const CodeRenderer = props => {
    console.log('Render code block: ', props)
    return BlockContent.defaultSerializers.types.block(props)
}

...

<BlockContent
   blocks={post._rawExcerpt}
   serializers={{
       types: {
           code: CodeRenderer
       }
   }}
/>
AI Update

I see the issue! Your CodeRenderer component is calling BlockContent.defaultSerializers.types.block(props), which is actually rendering it as a regular text block instead of a code block. This is why you're still getting the error.

Here's what you need to fix:

import BlockContent from '@sanity/block-content-to-react'

const CodeRenderer = props => {
    console.log('Render code block: ', props)
    return (
        <pre>
            <code>{props.node.code}</code>
        </pre>
    )
}

<BlockContent
   blocks={post._rawExcerpt}
   serializers={{
       types: {
           code: CodeRenderer
       }
   }}
/>

The key points:

  1. Access the code content via props.node.code (not by calling the default block serializer)
  2. Return actual code markup - typically a <pre><code> combination
  3. If your schema includes a language field, you can access it via props.node.language for syntax highlighting

If you want to add syntax highlighting, you could use something like:

import SyntaxHighlighter from 'react-syntax-highlighter'

const CodeRenderer = props => {
    return (
        <SyntaxHighlighter language={props.node.language || 'text'}>
            {props.node.code}
        </SyntaxHighlighter>
    )
}

Important note: The @sanity/block-content-to-react package is deprecated. For new projects, you should use @portabletext/react instead. The migration is straightforward - the main difference is using a components prop instead of serializers, and accessing value instead of node:

import {PortableText} from '@portabletext/react'

const components = {
    types: {
        code: ({value}) => (
            <pre>
                <code>{value.code}</code>
            </pre>
        )
    }
}

<PortableText value={post._rawExcerpt} components={components} />
Show original thread
9 replies
Hi David! You can either specify specific serializers (serializers.types, serializers.styles, etc.) or just do it as one (i.e., serializers). What does your code look like where you’re using the 
BlockContent
component?
Ahhh.. thank you for the edit.
Thanks Geoff, I tried the code like on here: https://github.com/sanity-io/block-content-to-react#customizing-the-default-serializer-for-block-type , but wouldn’t work so modified it just to print out something, but still at no avail.
So you’re getting no output at all? What is your console.log printing?
It’s not showing anything. I get the “Unknown block type” error. So it’s like it’s not reading the serializers instruction in the BlockContent tag
Okay. I'd be looking at blocks then. Please bear with me as I'm not too familiar with Gatsby but we'll figure it out.
Thanks again. Sorry my bad… I think I just answered my own question… I have it on a different block content. Checking right now…
Yeap! That was it! I had it on the wrong page. Thanks again!!!
Glad you got it working! :)

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?