Unknown Block Type "code block"

[Michael-Seth]

I get this error whenever I try to render the formatted code in my user component (next.js 13)
[@portabletext/react] Unknown block type "Code block", specify a component for it in the components.types prop

I don't know if I am doing something wrong, here is my RichTextComponent.ts file

import Refractor from 'react-refractor'
import js from 'refractor/lang/javascript';
import typescript from "refractor/lang/typescript";

Refractor.registerLanguage(js);
Refractor.registerLanguage(typescript);

type CodeProps = {
    value: {
      code: string;
      language: string;
      highlightedLines?: number[];
    };
  };

const CodeBlock = (props: CodeProps) => {
    const { code, language, highlightedLines } = props.value;
    return (
      <Refractor
        language={language || "javascript"}
        value={code}
        markers={highlightedLines}
      />
    );
}

export const RichTextComponents = {
    types: {
        code: CodeBlock,
    },

Although the formatted code shows in my sanity studio.
Can anyone help out.
Thanks.

[Mejiabrayan]

Any luck?

[kevinmichaelchen]

Does the key in types need to match the string you're seeing in the error message?

e.g.,

export const RichTextComponents = {
    types: {
        ["Code block"]: CodeBlock,
    },

[Evavic44]

In my case, the error was because I defined the <Refractor /> component inside the component.code prop instead of component.types. Here's my working example:

// CodeBlock.tsx
import Refractor from "react-refractor";
import js from "refractor/lang/javascript";
import ts from "refractor/lang/typescript";

Refractor.registerLanguage(js);
Refractor.registerLanguage(ts);

type codeTypes = {
  value: {
    code: string;
    language: string;
    filename?: string;
  };
};

export default function CodeBlock({ value }: codeTypes) {
  return (
    <div>
	  <p>{value.filename}</p>
      <Refractor
        language={value.language}
        value={value.code}
      />
    </div>
  );
}

And then in the PortableText component

// CustomPortableTextComponent.tsx
import CodeBlock from "./codeBlock"
import { PortableTextComponents } from "@portabletext/react";

export const CustomPortableTextComponent: PortableTextComponents = {
  types: {
    code: CodeBlock,
  },
}

[Mejiabrayan]

In my case, the error was because I defined the <Refractor /> component inside the component.code prop instead of component.types. Here's my working example:

// CodeBlock.tsx
import Refractor from "react-refractor";
import js from "refractor/lang/javascript";
import ts from "refractor/lang/typescript";

Refractor.registerLanguage(js);
Refractor.registerLanguage(ts);

type codeTypes = {
  value: {
    code: string;
    language: string;
    filename?: string;
  };
};

export default function CodeBlock({ value }: codeTypes) {
  return (
    <div>
	  <p>{value.filename}</p>
      <Refractor
        language={value.language}
        value={value.code}
      />
    </div>
  );
}

And then in the PortableText component

// CustomPortableTextComponent.tsx
import CodeBlock from "./codeBlock"
import { PortableTextComponents } from "@portabletext/react";

export const CustomPortableTextComponent: PortableTextComponents = {
  types: {
    code: CodeBlock,
  },
}

How would I go about applying styling to this?

[Evavic44]

Just download any theme from prism themes and place it inside your project.

app/
├── global.css
└── styles/
    └── prism-dracula.css

And then import it into your global.css file:

@import "./styles/prism-dracula.css";
...