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

11 replies
Last updated: Aug 14, 2022
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
const myPortableTextComponents = {
  marks: {
    internalLink: ({ children, value }) => {
      return (
        <Link href={`/${value.slug.current}`} prefetch={false}>
          <a>{children}</a>
        </Link>
      )
    },
  },
}

export const PortableText = (props) => (
  <PortableTextComponent components={myPortableTextComponents} {...props} />
)
It doesn't break the build but just curious why if I am defining it?
Aug 13, 2022, 5:27 AM
I think you missed one thing: A “link” is expressed as a mark annotation.
Aug 13, 2022, 7:31 AM
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.
Aug 13, 2022, 9:43 AM
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:

export const CustomPortableText = ({ value }) => (
  <PortableText value={value} components={myPortableTextComponents} />
)
Aug 13, 2022, 9:47 AM
I’ll try the value suggestion and yes I renamed the import
Aug 13, 2022, 1:30 PM
So I am doing
export const PortableTextComponent = ({ value }) => (
  <PortableText components={myPortableTextComponents} value={value} />
)
but I still get

Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Aug 13, 2022, 2:22 PM
Even adding
onMissingComponent={false}
does nothing...
Aug 13, 2022, 3:38 PM
Can you share your schema?
Aug 13, 2022, 7:05 PM
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",
},
],
};
Aug 13, 2022, 7:32 PM
Well that doesn't format nicely on mobile 🥲
Aug 13, 2022, 7:32 PM
Nothing wrong here, do you get any result from your blockContent when you fetch your data?
Aug 14, 2022, 7:56 AM
Yup everything works as expected
Aug 14, 2022, 11:01 AM

Sanity.io – build remarkable experiences at scale

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