richTextComponents and the App Router

Developing with Prismic
,
1

Greetings all! I am forcing myself to ride the struggle bus :bus: via the App router and also making myself learn typescript along the way. I need some guidance on a specific problem. In the old Pages routing system, we used the _app file and the PrismicProvider component. This allowed us (me) to:

<PrismicProvider
      internalLinkComponent={props => <Link {...props} />}
      richTextComponents={richTextComponents} // <-- this is the part I'm asking about
    >
    <Component {...pageProps} />
</PrismicProvider>

Notice how we could define a default set of components for the PrismicRichText component for our slices? I've created a separate file called richTextComponents.ts in a lib file and I'm ok with passing it to PrismicRichText whenever I need it...however, when I turn it to TS from JS, I get hella (remember when people said hella? haha) warnings.

'Heading' refers to a value, but is being used as a type here. Did you mean 'typeof Heading'?

Here's a sample of my richTextComponents file:

import { Heading } from '@/components/Heading'
import { PrismicLink } from '@prismicio/react'
export const richTextComponents = {
  heading1: ({ children }) => (
    <Heading as="h1" size="5xl">
      {children}
    </Heading>
  ),
  heading2: ({ children }) => (
    <Heading as="h2" size="4xl">
      {children}
    </Heading>
  ),

Any thoughts?

3

Hello @nf_mastroianni,

Thanks for reaching out to us!

It’s difficult to tell exactly the problem, but I suspect the error is happening because the file is being renamed from .js to .ts. However, the extension should be .tsx since it includes TSX (e.g., <Heading> ). TypeScript sees <…> as a type parameter, but it sees it as JSX in TSX.In other words, richTextComponents.js should be renamed to richTextComponents.tsx, not richTextComponents.ts .

That being said, we recommend a different practice now. Rather than setting up the _app.tsx (which no longer exists in the App Router) or creating a reusable richTextComponents.tsx export, we recommend creating a custom <PrismicRichText> component. The docs explain the recommendation here: @prismicio/react Technical Reference - Documentation - Prismic (starting at “To globally customize <PrismicRichText> …“).

Let me know if you have further questions.

Thanks,
Racheal.

2 Likes
4

This appears to be exactly what I needed for globally setting these components. I will worry about TypeScript later

2 Likes
5

I'm glad I could be of help :slightly_smiling_face:. Let us know if you have any other questions.