Unknown mark type "internalLink" error despite defining component in marks

The warning you're seeing should not appear if your component is correctly defined. This warning indicates that @portabletext/react is encountering an internalLink mark type in your content but isn't finding the corresponding component definition—even though you think you've defined it.

Here are the most likely causes and solutions:

1. Component Definition Isn't Being Applied

The most common issue is that your myPortableTextComponents object isn't actually being passed to the PortableText component properly. Double-check that:

• You're importing and using your custom PortableText wrapper component (not accidentally importing the original from @portabletext/react elsewhere)
• The components prop is actually being passed through with {...props}

2. Schema Mismatch

The mark type name in your Sanity schema must exactly match the key in your components definition. According to the @portabletext/react documentation, verify in your Sanity schema that you've defined the annotation as:

{
  type: 'object',
  name: 'internalLink',  // Must match exactly
  // ... rest of schema
}

Even a small typo or casing difference (InternalLink vs internalLink) will cause this warning.

3. Next.js Link Usage Issue

Your code has a Next.js issue that could cause problems. In Next.js 13+, you should not nest an <a> tag inside <Link>. Update your component to:

const myPortableTextComponents = {
  marks: {
    internalLink: ({ children, value }) => {
      return (
        <Link href={`/${value?.slug?.current || ''}`} prefetch={false}>
          {children}
        </Link>
      )
    },
  },
}

Note: I also added optional chaining (value?.slug?.current) to prevent errors if the data structure isn't what you expect.

4. Controlling Warning Behavior

You can control how the library handles missing components using the onMissingComponent prop:

<PortableTextComponent 
  components={myPortableTextComponents} 
  onMissingComponent={(message, options) => {
    console.warn(message, options)
  }}
  {...props} 
/>

However, this is just for debugging—the warning shouldn't appear in the first place if everything is configured correctly.

Verification Steps

1. Check your browser's rendered output—are the internal links actually working and rendering correctly?
2. If they ARE rendering correctly, the issue might be with how you're passing components in a specific instance
3. If they're NOT rendering correctly (showing as plain text), then the component truly isn't being found

The key point: this warning means the library genuinely can't find your component definition. It's not "informational" or "expected"—it indicates a configuration mismatch that needs to be resolved. Make sure your schema annotation name exactly matches your component key, and verify that your custom PortableText wrapper is actually being used throughout your application.