Unknown mark type, specify a component for it false positive? about react-portabletext

[JamesSingleton]

So I think the issue actually comes from import { toHTML } from '@portabletext/to-html'. I noticed that when I run my postbuild which builds an RSS feed is when it is happening 🤦🏼‍♂️

[rexxars]

I am not able to reproduce this: https://github.com/rexxars/next-pt-repro
Could you share minimal reproduction steps?

[JamesSingleton]

@rexxars sure, so in my studio I created a blockContent.js that looks like

import React from "react";
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: () => (
              <svg
                width="16px"
                viewBox="0 0 654 869"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g
                  id="Page-1"
                  stroke="none"
                  strokeWidth="1"
                  fill="none"
                  fillRule="evenodd"
                >
                  <g
                    id="sanity-logo-s-(1)"
                    fill="currentColor"
                    fillRule="nonzero"
                  >
                    <path
                      d="M343.36,744.64 C251.78,744.64 187.08,704.35 159.98,630.86 L0.46,630.86 C34.6,780.14 162,868.65 344.77,868.65 C453.44,868.65 546.21,830.93 600.45,764.96 C598.22,697.56 576,647.43 529,609.34 C513.78,693.66 445.35,744.64 343.36,744.64 Z"
                      id="Path"
                    ></path>
                    <path
                      d="M320.67,123.39 C429.86,123.39 473.76,185.33 491.09,228.56 L643.69,228.56 C608.91,83.5 491.64,0.76 319.25,0.76 C214.4,0.76 124.31,39.4 71,107 C73.64,167.86 97.19,215.7 143.35,252.26 C160.62,172.94 227.15,123.39 320.67,123.39 Z"
                      id="Path"
                    ></path>
                    <path
                      d="M436.38,381 L277.65,343.62 C234.863333,332.62 197.98,318.646667 167,301.7 C97.3,263.5 57.17,210 45.6,140 C45.17,140.87 44.76,141.76 44.34,142.63 C28.55,175.42 20.34,212.07 20.34,250.63 C20.34,371.11 89.02,445.51 230.34,478.08 L386.18,514 C432.4,526.19 471.41,540.84 503.74,558.49 C577.39,598.69 616.34,654.49 626.53,732.16 C626.9,731.44 627.25,730.71 627.61,729.99 C644.78,696.05 653.47,657.76 653.47,615.61 C653.49,463.53 535.43,404.08 436.38,381 Z"
                      id="Path"
                    ></path>
                  </g>
                </g>
              </svg>
            ),
            fields: [
              {
                title: "Reference",
                name: "reference",
                type: "reference",
                to: [{ type: "post" }, { type: "category" }],
              },
            ],
          },
        ],
      },
    },
    // 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",
    },
  ],
};

Then in my Nextjs application I have a lib/sanity.js file that looks like

import Image from 'next/image'
import Link from 'next/link'

import createImageUrlBuilder from '@sanity/image-url'
import { PortableText } from '@portabletext/react'
import { getImageDimensions } from '@sanity/asset-utils'
import { sanityConfig } from '@lib/config'
import { Tweet } from '@components/ui'

export const imageBuilder = createImageUrlBuilder(sanityConfig)
export const urlForImage = (source) => imageBuilder.image(source).auto('format').fit('min')

const ImageComponent = ({ value, isInline }) => {
  const { width, height } = getImageDimensions(value)
  return (
    <Image
      src={urlForImage(value).fit('min').auto('format').url()}
      alt={value.alt || ' '}
      width={width}
      height={height}
      layout="responsive"
      sizes="50vw"
    />
  )
}

const InternalLink = ({ children, value }) => (
  <Link href={`/${value.slug.current}`} prefetch={false}>
    <a>{children}</a>
  </Link>
)

const TwitterComponent = ({ value }) => {
  return <Tweet id={value.id} metadata={JSON.stringify(value.metadata)} />
}
const myPortableTextComponents = {
  types: {
    image: ImageComponent,
    twitter: TwitterComponent,
  },
  marks: {
    internalLink: InternalLink,
  },
}

export const PortableTextComponent = ({ value }) => (
  <PortableText components={myPortableTextComponents} value={value} onMissingComponent={false} />
)

is then used in lets saypages/[slug].tsx` like so

<div className="prose-md prose m-auto w-11/12 prose-a:text-blue-600 hover:prose-a:text-blue-500 sm:prose-lg sm:w-3/4">
  <PortableTextComponent value={currentPost.body} />
</div>

Where currentPost.body is that blockContent.js from my studio. When I run npm run build I get the following output in the terminal

Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown block type "twitter", specify a component for it in the `components.types` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown block type "twitter", specify a component for it in the `components.types` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option
Unknown mark type "internalLink", specify a component for it in the `components.marks` option

[swalker326]

Can you share the data being passed in as value to the component?

[JamesSingleton]

@swalker326 here is an example

[{"_key":"8f0b14434825","_type":"block","children":[{"_key":"174d379660fc","_type":"span","marks":[],"text":"A day after being named the Eddie Robinson Coach of the Year, Deion Sanders flipped the nation's No. 1 recruit in the class of 2022 in Travis Hunter from his commit to Florida State (Deion Sanders' alma mater) to an "},{"_key":"8637298b0f11","_type":"span","marks":["6936e06605c0"],"text":"FCS"},{"_key":"d64b84ec2c72","_type":"span","marks":[],"text":" program in Jackson State."}],"markDefs":[{"_key":"6936e06605c0","_type":"internalLink","reference":{"_ref":"e9a9974c-0d67-458f-a2eb-4582ab9711a5","_type":"reference"},"slug":{"_type":"slug","current":"fcs"}}],"style":"normal"},{"_key":"23c729cc0674","_type":"block","children":[{"_key":"8c9d2d421653","_type":"span","marks":[],"text":"Travis is a five star cornerback/ wide receiver from Collins Hill High School in Suwanee, GA. Scouts have made comparisons of him to Pro Football Hall of Famer Charles Woodson for his ability to play both offense and defense."}],"markDefs":[],"style":"normal"},{"_key":"a674c4167572","_type":"block","children":[{"_key":"7b5229490fc9","_type":"span","marks":[],"text":"The fact that Travis wants to play both receiver and cornerback at the next level and Deion Sanders willing to let him play both was probably a huge draw for him. Combine that with the opportunity to be coached by Deion Sanders being one of the best to ever play both sides of the ball, Jackson State is starting to become a powerhouse at the FCS level going 11-1 this past season."}],"markDefs":[],"style":"normal"},{"_key":"ccdc75c87df3","_type":"block","children":[{"_key":"b8f78d9edbaf","_type":"span","marks":[],"text":"Hunter said this on his decision to choose JSU over FSU:"}],"markDefs":[],"style":"normal"},{"_key":"d474d354fff4","_type":"block","children":[{"_key":"4a39f97900e4","_type":"span","marks":[],"text":"Florida State has always been a beacon for me. I grew up down there, that's where my roots are, and I never doubted that I would play for the Seminoles. It's a dream that is hard to let go, but sometimes we are called to step into a bigger future than the one we imagined for ourselves. For me that future is at Jackson State University."}],"markDefs":[],"style":"blockquote"},{"_key":"ad6cbf28ea0f","_type":"block","children":[{"_key":"0adbfb866077","_type":"span","marks":[],"text":"Travis Hunter is the first ever five star recruit to sign with an FCS school since the star rating came out in 2006. I believe this is ground breaking for FCS programs around the country, not just those coached by NFL legends. In signing Travis, it put FCS schools, especially HBCU, on the map as an attractive destination for recruits."}],"markDefs":[],"style":"normal"},{"_key":"4c83083882b4","_type":"block","children":[{"_key":"6085a66df424","_type":"span","marks":[],"text":""}],"markDefs":[],"style":"normal"},{"_key":"b7e76a9d83bc","_type":"twitter","id":"1471166038834356237","markDefs":null,"metadata":{"public_metrics":{"retweet_count":7178,"reply_count":1766,"like_count":39605,"quote_count":2887},"author_id":"1123402790393528320","entities":{"mentions":[{"start":31,"end":46,"username":"jacksonstatefb","id":"895447716058324994"}],"hashtags":[{"start":14,"end":18,"tag":"jsu"},{"start":19,"end":28,"tag":"gotigers"}],"urls":[{"start":47,"end":70,"url":"https://t.co/UTyzMPgVH6","expanded_url":"https://twitter.com/TravisHunterJr/status/1471166038834356237/photo/1","display_url":"pic.twitter.com/UTyzMPgVH6","media_key":"3_1471166021667106822"}]},"created_at":"2021-12-15T17:11:31.000Z","attachments":{"media_keys":["3_1471166021667106822"]},"id":"1471166038834356237","text":"It’s OFFICIAL #jsu #gotigers 🐅 @jacksonstatefb ","author":{"verified":true,"username":"TravisHunterJr","profile_image_url":"https://pbs.twimg.com/profile_images/1471250435742875650/I4qT76fu_normal.jpg","url":"https://t.co/SVatrVfU1Q","id":"1123402790393528320","protected":false,"name":"Travis Hunter"},"media":[{"type":"photo","width":1909,"height":1867,"media_key":"3_1471166021667106822","url":"https://pbs.twimg.com/media/FGqhs78XsAYpBYX.jpg"}],"polls":null,"referenced_tweets":[],"url_meta":null,"video":null}},{"_key":"e37a384577af","_type":"block","children":[{"_key":"68acf45bb587","_type":"span","marks":[],"text":"Other than this big signing, JSU also signed six players from the transfer portal:"}],"markDefs":[],"style":"normal"},{"_key":"d75e8b0b2152","_type":"block","children":[{"_key":"01f4aa367800","_type":"span","marks":[],"text":"Mark Pope ( 6-1, 175, WR, University of Miami)"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"8284020bd3e3","_type":"block","children":[{"_key":"66825a4cd3fc","_type":"span","marks":[],"text":"Michael Pleas (6-3, 222, S, Southern Miss)"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"54811e76eebf","_type":"block","children":[{"_key":"527f3ee3b63b","_type":"span","marks":[],"text":"Jason Mercier (6-5, 235, Edge, Florida International University)"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"e710824341ec","_type":"block","children":[{"_key":"759859ff5a09","_type":"span","marks":[],"text":"Evan Henry (6-3, 315, OG, Louisiana-Monroe)"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"81b76b0819e9","_type":"block","children":[{"_key":"4737fa4b934f","_type":"span","marks":[],"text":"Jordyn Williams (6-1, 184, WR, Indiana)"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"},{"_key":"031c7f7c459d","_type":"block","children":[{"_key":"f3cef10b2d30","_type":"span","marks":[],"text":"Camron Buckley (6-2, 198, WR, Indiana)"}],"level":1,"listItem":"bullet","markDefs":[],"style":"normal"}]

[swalker326]

Thanks, I was unable to reproduce locally. I spun up a sample next-js app with npx create-next-app --ts added portable text and using your sample data saw now errors when running the project. I'd normally create a codesandbox and share it, but I was having some issues with the next template on codesandbox. If you can reproduce on codesandbox and share the link to the error I can help troubleshoot it further.

Here is the code from my sample component, you can try hardcoding your value into a const value = [//...value array]:

import Link from "next/link";
import { PortableText, PortableTextMarkComponentProps } from "@portabletext/react";

export default function IndexPage() {
  const InternalLink = ({
    children,
    value
  }: PortableTextMarkComponentProps) => {
    return (
      <Link href={`/${value?.slug.current}`} prefetch={false}>
        <a>{children}</a>
      </Link>
    );
  };
  const myPortableTextComponents = {
    types: {
      image: ({ value }: { value: any }) => {
        return <div>IMAGE: {value}</div>;
      }
    },
    marks: {
      internalLink: InternalLink
    }
  };
  return (
    <div className="App">
      <PortableText value={value} components={myPortableTextComponents} />
    </div>
  );
}

[JamesSingleton]

I am not able to reproduce in a codesandbox either, not even sure why it would show up after running next build but not during dev mode. Everything still works as expected but was just curious what the print to the console 🤷🏼‍♂️

[swalker326]

Good catch, you shouldn't need that right? Unless something specific for next requires it for the ssr?

[JamesSingleton]

@swalker326 my build-rss script needs toHTML as https://www.npmjs.com/package/feed does not like when I do content: <PortableTextComponent value={post.body} /> as it errors with

/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:111
  return options.ignoreCdata ? '' : '<![CDATA[' + ('cdataFn' in options ? options.cdataFn(cdata, currentElementName, currentElement) : cdata.replace(']]>', ']]]]><![CDATA[>')) + ']]>';
                                                                                                                                             ^

TypeError: cdata.replace is not a function
    at writeCdata (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:111:142)
    at writeElementsCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:292:116)
    at writeElementCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:272:12)
    at writeElementsCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:295:73)
    at writeElementCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:272:12)
    at writeElementsCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:295:73)
    at writeElementCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:272:12)
    at writeElementsCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:295:73)
    at writeElementCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:272:12)
    at writeElementsCompact (/Users/jamessingleton/Code/Projects/redshirt-sports/node_modules/xml-js/lib/js2xml.js:295:73)