Get help on Discord

Sanity code-input plugin: Cannot read properties of undefined (reading 'code')

7 replies
Last updated: Nov 29, 2025
Hey guys, using NextJS 13.4, Sanity v3, and tailwind to make a personal blog. Everything's working just fine, except for the code-input plugin.
I've followed all of the steps.

1. I've installed the plugin just fine
2. I've added the plugin to sanity.config.js
3. Ive added all the needed schemas 

...other stuff,
{
  name: 'content',
  title: 'Content',
  type: 'array',
  of: [
  {
    type: 'block',
  },
  {...other types of content here, eg. images etc.},
  {
    name: "code",
    title: "Code Block",
    type: "code",
    options: {
      withFilename: true, // optional
      highlightedLines: true, // optional
    },
  }
  ]
}
4. I'm stuck at properly passing my RichTextComponent.jsx. All other styles within this component work just fine. The only style that doesn't work is the code one, shown below:

export const RichTextComponents = {
  types: {

//BIG PROBLEMS HERE!!!
    code: ({ data }) => {
      const code = data.code;
      const filename = data.filename;
      const language = data.language;

      return (
        <div>
          <div className="flex justify-between ">
            <p className="opacity-70">{filename}</p>
            <p>
              language: <span className="opacity-70">{language}</span>
            </p>
          </div>
          <pre className="p-2">
            <code>
              {/* this method has no syntax highlighting,
            look below for that */}
              {code}
            </code>
          </pre>
        </div>
      );
    },
  },
///END OF PROBLEMS ABOVE


//image type working just fine
//block, list, marks, etc working just fine//
};
This is how I'm passing the RichTextComponent props on the blog page:

      <div className="px-2 prose prose-lg my-2text-justify mx-auto">
        <PortableText value={blog.body} components={RichTextComponents} />
      </div>
Below is the error I get:

error - components\RichTextComponents.jsx (28:24) @ code
error - TypeError: Cannot read properties of undefined (reading 'code')
    at code (./components/RichTextComponents.jsx:38:31)
    at stringify (<anonymous>)
  26 |     },
  27 |     code: ({ data }) => {
> 28 |       const code = data.code;
     |                        ^
  29 |       const filename = data.filename;
  30 |       const language = data.language;
  31 | 
error - components\RichTextComponents.jsx (28:24) @ code
error - TypeError: Cannot read properties of undefined (reading 'code')
    at code (./components/RichTextComponents.jsx:38:31)
Can anybody please help?
AI Update

Looking at your error, the issue is that you're using data to access the code properties, but with Portable Text in Sanity v3, the correct property is value, not data.

The code-input plugin stores its content in a specific structure, and when you're rendering it through PortableText, you need to access it via value.code, value.filename, and value.language.

Here's the corrected version of your RichTextComponents:

export const RichTextComponents = {
  types: {
    code: ({ value }) => {  // Changed from 'data' to 'value'
      const code = value.code;
      const filename = value.filename;
      const language = value.language;

      return (
        <div>
          <div className="flex justify-between ">
            <p className="opacity-70">{filename}</p>
            <p>
              language: <span className="opacity-70">{language}</span>
            </p>
          </div>
          <pre className="p-2">
            <code>
              {code}
            </code>
          </pre>
        </div>
      );
    },
  },
  // ...rest of your components
};

The key change is ({ data }) → ({ value }). This is the standard way custom types are passed to serializers in @portabletext/react, which is what the <PortableText> component uses under the hood.

If you want to add syntax highlighting (which you mentioned in your comment), you could integrate a library like Prism or react-syntax-highlighter:

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';

code: ({ value }) => {
  return (
    <div>
      {value.filename && (
        <div className="flex justify-between bg-gray-800 px-4 py-2 text-sm text-gray-300">
          <p>{value.filename}</p>
          <p>language: <span className="opacity-70">{value.language}</span></p>
        </div>
      )}
      <SyntaxHighlighter language={value.language} style={vscDarkPlus}>
        {value.code}
      </SyntaxHighlighter>
    </div>
  );
}

That should fix your error and get your code blocks rendering properly!

Show original thread
7 replies

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?