Skip to content
Get help on Slack

Issue with code-input plugin in NextJS 13.4, Sanity v3, and tailwind setup.

7 replies
Last updated: Jul 24, 2023
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?
Jul 24, 2023, 6:10 PM
Hey Walid,
I've copied your code, but one thing that is different, is that where you're using 
data
in 
RichTextComponent.jsx
, I'm using 
value
. If I use 
data
, I can duplicate your error message, but 
value
fixes it.

code: ({ value }) => {
	console.log('value: ', 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>
					{/* this method has no syntax highlighting,
look below for that */}
					{code}
				</code>
			</pre>
		</div>
	);
},
Jul 24, 2023, 7:12 PM
Thank you! It works!
But I am so frustrated as to
why it works! Haha. Why "value"? Where is that written?
Jul 24, 2023, 7:25 PM
Perfect! Well, at least the blocker is removed!
The reason that it works is found in your 
node-modules
. Specifically:

node_modules > @portabletext > react > dist > react-portable-text.d.ts
On around line 120 (depending on version, of course), where it declares the interface 
PortableTextMarkComponentProps
, it's looking for 
value
.
Jul 24, 2023, 7:35 PM
Thank you KJ. I really need to move to TypeScript.
Jul 24, 2023, 7:49 PM
No problem, and let us know if there's anything we can do to help! Learning TS is a bit of a process, but once it clicks (and it does eventually click), it makes a lot of sense.
Jul 24, 2023, 7:53 PM
Thanks Kj! Is there a directory of other types I could use? Highlighting, etc? I've successfully added images and codeblocks so far.
Jul 24, 2023, 8:02 PM
There's not an official directory that I know of, but there are a few ideas in the article about Configuring the Portable Text Editor . In addition to that, there are a lot of things out in the wild that people have created. That's the really cool thing about it - how customizable it is - but that's also why there's not a definitive catalogue. A few that I have used in the past include a horizontal rule, and various text decorators including colours, and highlighting.
Jul 24, 2023, 8:08 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?