TypeScript issue with PrismicNextLink

Developing with Prismic
,
1

Hi,
I'm encountering a TypeScript error with a React component that returns a PrismicNextLink. The component is supposed to accept all props that are expected by PrismicNextLink, using the PrismicNextLinkProps type. However, I'm getting the following error:

"Type '{ className: string; id?: string | undefined; as?: Url | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; children?: ReactNode; ... 290 more ...; href?: undefined; } | { ...; } | { ...; }' is not assignable to type 'IntrinsicAttributes & ((Omit<Omit<Omit<AnchorHTMLAttributes, "as" | "replace" | "href" | ... 8 more ... | "onClick"> & { ...; } & { ...; } & RefAttributes<...>, "field" | ... 2 more ... | "document"> & { ...; } & { ...; }, "ref"> | Omit<...> | Omit<...>) & RefAttributes<...>)'."

Any guidance on resolving this would be greatly appreciated.

Component:

const Button = ({ ...props }: PrismicNextLinkProps) => {
  return (
    <PrismicNextLink
      {...props}
      className={`block w-fit bg-cyan-700 hover:bg-cyan-800 transition-colors duration-200 ease-in-out py-3 px-12 rounded-full font-heading text-white font-bold text-base tracking-wider`}
    />
  )
}
1 Like
3

I can't answer your question (because I don't know how), but I wanted to add my support for you finding an answer. I look forward to seeing what this solution would look like.

5

Hi @sarieddinekarim63,

This seems to be an issue of conflicting/mismatched props between components that TypeScript isn't resolving. For example, PrismicNextLink accepts all props of next/link except href, which might be causing your issue here. Have you tried specifying a field for your PrismicNextLink?

Such as in this example:

<PrismicNextLink field={document.data.linkField}>Click me!</PrismicNextLink>

Let me know if that helps!"

6

The error suggests a type mismatch with the props you're spreading onto the component, particularly around href, as, or other AnchorHTMLAttributes. Are you certain that PrismicNextLinkProps correctly extends all expected types, especially when omitting or modifying some props like href or as?

7

Heyllo, did you ever get this issue figured out? I'm having the same problem and have yet to figure it out.

8

For anyone else running into this issue, Josh found the solution in the following thread:

It was related to package dependencies. To guarantee up-to-date packages, you can run npx npm-upgrade@latest, delete the node_modules folder, and re-install all the dependencies.

1 Like