Internal Link Error in Next.js Application: Unknown mark type "internalLink"

Piggybacking off the above, when adding an internal link with

@portabletext/react@^1.0.6

and build my nextjs application, I get

Unknown mark type "internalLink", specify a component for it in the

components.marks

option

However, I am doing
It doesn't break the build but just curious why if I am defining it?

I think you missed one thing: A “link” is expressed as a mark annotation.

Maybe it’s because you are spreading the props?I’d do

<PortableTextComponent value={value} components={myPortableTextComponents} />

to avoid any confusion when I use it.

You might also have a conflict with your

PortableText

because it’s a named export.Or have you renamed the import?

import { PortableText as SomethingElse } from '@portabletext/react'

Something like that would also avoid confusion:

I’ll try the value suggestion and yes I renamed the import

So I am doing
but I still get

Even adding

onMissingComponent={false}

does nothing...

Can you share your schema?

import { PlugIcon } from "@sanity/icons";export default {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
{
title: "Block",
type: "block",
// Styles let you set what your user can mark up blocks with. These
// correspond with HTML tags, but you can set any title or value
// you want and decide how you want to deal with it where you want to
// use your content.
styles: [
{ title: "Normal", value: "normal" },
{ title: "H1", value: "h1" },
{ title: "H2", value: "h2" },
{ title: "H3", value: "h3" },
{ title: "H4", value: "h4" },
{ title: "Quote", value: "blockquote" },
],
lists: [{ title: "Bullet", value: "bullet" }],
// Marks let you mark up inline text in the block editor.
marks: {
// Decorators usually describe a single property – e.g. a typographic
// preference or highlighting by editors.
decorators: [
{ title: "Strong", value: "strong" },
{ title: "Emphasis", value: "em" },
],
// Annotations can be any object structure – e.g. a link or a footnote.
annotations: [
{
title: "URL",
name: "link",
type: "object",
fields: [
{
title: "URL",
name: "href",
type: "url",
validation: (Rule) =>
Rule.uri({
scheme: ["http", "https", "mailto", "tel"],
}),
},
],
},
{
name: "internalLink",
title: "Internal Link",
type: "object",
icon: PlugIcon,
fields: [
{
title: "Reference",
name: "reference",
type: "reference",
to: [{ type: "post" }],
},
],
},
],
},
},
// You can add additional types here. Note that you can't use
// primitive types such as 'string' and 'number' in the same array
// as a block type.
{
type: "image",
options: { hotspot: true, metaData: ["blurhash", "lqip"] },
},
{
type: "player",
},
{
type: "twitter",
},
],
};

Well that doesn't format nicely on mobile 🥲

Nothing wrong here, do you get any result from your blockContent when you fetch your data?

Yup everything works as expected