👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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.

Was this answer helpful?