PrismicProvider internalLinkComponent does not have locale prop and TypeScript throws an error

Developing with Prismic
,
1

I'm using NextJS 13 and TypeScript and want to create a multilanguage website, but when I want to get a prop from internalLinkComponent on PrismicProvider I get an error that locale does not exist on the props.

TS2322: Type '({ href, children, locale, ...props }: { href: string; children: ReactNode; locale: any; }) =&gt; JSX.Element' is not assignable to type 'ElementType&lt;LinkProps&gt; | undefined'.<br/>Type '({ href, children, locale, ...props }: { href: string; children: ReactNode; locale: any; }) =&gt; JSX.Element' is not assignable to type 'FunctionComponent&lt;LinkProps&gt;'.<br/>Types of parameters '__0' and 'props' are incompatible.<br/>Property 'locale' is missing in type 'LinkProps' but required in type '{ href: string; children: ReactNode; locale: any; }'.

Is there any way I can pass that TypeScript errors?

Thank you very much for your help.

2

Do you have a translation for the master locale document on your repository?
Also, I found this doc that teaches you how to ignore the TS error.

4

Do you have a translation for the master locale document on your repository?

What do you mean by that? I don't think this error is related to the transitions but to the PrismicProvider props.

5

I wondered because sometimes, when using a Content Relationship field to another document, you'll need the lang to redirect to the correct page.

What kind of prop are you trying to get from the internalLinkComponent?

6

@Pau this is the linkResolver function I have inside prismico.ts file:

export const linkResolver = (doc: any) => {
  if (doc.type === 'page') {
    if (doc.uid === 'home') {
      return '/'
    } else {
      return `/${doc.uid}`
    }
  }

  return '/'
}

Here is my PrismicProvider call inside _app.tsx file, that is mentioned on this Prismic documentation page, but I get an error that I already mentioned above:

 <PrismicProvider
        linkResolver={linkResolver}
        internalLinkComponent={({ href, locale, ...props }: LinkProps) => {
          return <Link href={href} locale={locale} {...props} />
        }}
      >
1 Like
7

I see. Looking at the original error, it says that the locale property is missing in the LinkProps type, but it's required in the internalLinkComponent you're passing to the PrismicProvider. You can try and add a custom LinkProps that includes the locale property and use that interface instead of the default LinkProps interface.

interface CustomLinkProps extends LinkProps {
  locale: string;
}

Then, when you define your internalLinkComponent, you can use this custom interface instead of the default LinkProps:

const CustomLink: React.FC<CustomLinkProps> = ({ href, children, locale, ...props }) => {
  return (
    <Link href={href} locale={locale} {...props}>
      {children}
    </Link>
  );
};

Then, when you pass this CustomLink component to the PrismicProvider, TypeScript should recognize the locale property in the CustomLinkProps:

<PrismicProvider
  repositoryName={repositoryName}
  linkResolver={linkResolver}
  internalLinkComponent={CustomLink}
>
  <App />
</PrismicProvider>