PrismicNextLink throwing error when trying to deploy

[joshua.millstein (Josh Millstein)]

Hello. I followed the nextjs tutorial found here --> https://www.youtube.com/watch?v=nfZu56KsK_Q&t=1808s

I'm unable to deploy to vercel because of an error with the Button.tsx component. Everything looks good, code-wise, but PrismicNextLink is throwing an error. I'm new to all of this so the error message isn't helping me out much. I've also used PrismicNextLink in other files without issue (and I'm doing the same imports). The error I'm seeing in vercel (on deploy) is below. Any thoughts on what I'm doing wrong?

    Type '{ type?: string | undefined; replace?: boolean | undefined; lang?: string | undefined; prefix?: string | undefined; translate?: "no" | "yes" | undefined; content?: string | undefined; ... 291 more ...; className: string; }' is not assignable to type '(IntrinsicAttributes & Omit<Omit<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "replace" | "as" | "scroll" | ... 8 more ... | "onClick"> & { ...; } & { ...; } & RefAttributes<...>, "document" | ... 2 more ... | "field"> & { ...; } & { ...; }, "ref"> & RefAttributes<...>) | (IntrinsicAttributes & ... 1 more ... & Ref...'.
      Type '{ type?: string | undefined; replace?: boolean | undefined; lang?: string | undefined; prefix?: string | undefined; translate?: "no" | "yes" | undefined; content?: string | undefined; ... 291 more ...; className: string; }' is not assignable to type 'Omit<Omit<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "replace" | "as" | "scroll" | "href" | "shallow" | "passHref" | "prefetch" | ... 4 more ... | "onClick"> & { ...; } & { ...; } & RefAttributes<...>, "document" | ... 2 more ... | "field"> & { ...; } & { ...; }, "ref">'.
        Property 'document' is optional in type '{ type?: string | undefined; replace?: boolean | undefined; lang?: string | undefined; prefix?: string | undefined; translate?: "no" | "yes" | undefined; content?: string | undefined; ... 291 more ...; className: string; }' but required in type 'Omit<Omit<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "replace" | "as" | "scroll" | "href" | "shallow" | "passHref" | "prefetch" | ... 4 more ... | "onClick"> & { ...; } & { ...; } & RefAttributes<...>, "document" | ... 2 more ... | "field"> & { ...; } & { ...; }, "ref">'.
   7 | }: PrismicNextLinkProps) {
   8 |     return(
>  9 |         <PrismicNextLink 
     |          ^
  10 |             className={clsx("block w-fit bg-cyan-700 hover:bg-cyan-800 transition-colors duration-300 text-white font-bold py-3 px-12 rounded-full text-white font-nunito-sans tracking-wide text-base mb-8 md:mb-10", className)} {...restProps}

`import clsx from "clsx";
import { PrismicNextLink, PrismicNextLinkProps } from "@prismicio/next";

export default function Button({
className,
...restProps
}: PrismicNextLinkProps) {
return(
<PrismicNextLink
className={clsx("block w-fit bg-cyan-700 hover:bg-cyan-800 transition-colors duration-300 text-white font-bold py-3 px-12 rounded-full text-white font-nunito-sans tracking-wide text-base mb-8 md:mb-10", className)} {...restProps}
/>
);
}`

import clsx from "clsx";
import { PrismicNextLink, PrismicNextLinkProps } from "@prismicio/next";

export default function Button({
    className,
    ...restProps
}: PrismicNextLinkProps) {
    return(
        <PrismicNextLink 
            className={clsx("block w-fit bg-cyan-700 hover:bg-cyan-800 transition-colors duration-300 text-white font-bold py-3 px-12 rounded-full text-white font-nunito-sans tracking-wide text-base mb-8 md:mb-10", className)} {...restProps}
        />
    );
}

[Ezekiel (Ezekiel Ravidat)]

Hi @joshua.millstein,

Welcome to the community

This is not an error happening in your local environment? Sometimes deployment environments are a bit stricter. What button is causing this issue? The error indicates a type mismatch, so are you able to tell what you're passing to this button component in your code?

[joshua.millstein (Josh Millstein)]

Thanks Ezekiel! Well, the error is being called out in the local environment (in VSCode) but it doesn't seem to fail there, or at least I can run the npm run dev command is ok. The error seems contained to that component file as well and isn't because of the way that I'm referencing (passing properties to ) the button component in other files. I've been digging in on it quite a bit and I think the issue is that some of the properties in {...restProps} aren't compatible between NextLink and NextLinkProps but I'm super new to React / Next / ... prismic... (first project with all of it) so I'm struggling a bit to get the big picture here.

[joshua.millstein (Josh Millstein)]

here is an example of how I'm using the button component that I showed in the original post ...

   <Button field={slice.primary.button_link} className="mb-8 md:mb-10" >
            {slice.primary.button_text}
          </Button>

[joshua.millstein (Josh Millstein)]

that last screeshot show the red error squigly in VSCode along with the error that is being reporting in the definition of the button component. This is straight from the video tutorial that was put out by prismic

[joshua.millstein (Josh Millstein)]

I also see this in the errors... Types of property 'prefetch' are incompatible

and this...

className: string; } | { ...; } | { ...; }' is not assignable to type 'IntrinsicAttributes & ((Omit<Omit<Omit<AnchorHTMLAttributes<HTMLAnchorElement>

[Ezekiel (Ezekiel Ravidat)]

I think the issue is that some of the properties in {...restProps} aren't compatible between NextLink and NextLinkProps

This sounds about right to me PrismicNextLink is its own custom React component, and it doesn't accept the href prop that next/link has, which could be causing the problem here. I asked earlier what you were passing to this button, because usually this error means that some of the props from ...restProps are incompatible with what PrismicNextLink expects.

You say that you're able to run npm run dev "ok", do you mean that it won't stop you navigating your website locally, but your button doesn't work?

I saw you posted in that thread, did you try this?

TypeScript issue with PrismicNextLink

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!"

[joshua.millstein (Josh Millstein)]

The button works in dev. I did try to add the field property in PrismicNextLink but that doesn't help. I'm looking at the definitions but having a hard time figuring out which properties I should keep along... or if I should just swap PrismicNextLinkProps out for a more generic object ? Like I said, this is all very new to me so I'm having a tough time understanding how these properties are applied, etc. Was looking at the below code to try and figure it out.

export type PrismicNextLinkProps = Omit<React.ComponentProps<typeof Link>, "field" | "document" | "href" | "rel"> & {
    linkResolver?: prismic.LinkResolverFunction;
    rel?: string | prismic.AsLinkAttrsConfig["rel"];
} & ({
    field: prismic.LinkField | null | undefined;
    document?: never;
    href?: never;
} | {
    field?: never;
    document: prismic.PrismicDocument | null | undefined;
    href?: never;
} | {
    field?: never;
    document?: never;
    href: React.ComponentProps<typeof Link>["href"];
});
export declare const PrismicNextLink: React.ForwardRefExoticComponent<(Omit<Omit<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
    href: string | import("url").UrlObject;
    as?: (string | import("url").UrlObject) | undefined;
    replace?: boolean | undefined;
    scroll?: boolean | undefined;
    shallow?: boolean | undefined;
    passHref?: boolean | undefined;
    prefetch?: boolean | undefined;
    locale?: string | false | undefined;
    legacyBehavior?: boolean | undefined;
    onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
    onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
}> & {

[Ezekiel (Ezekiel Ravidat)]

Next.js ignores TypeScript errors in development, which is why you're not seeing the error until deployment. It's likely you'd see the same type error if you built the project locally with npm run build.

Are all your dependencies up to date? To guarantee they are, you can run npx npm-upgrade@latest, delete the node_modules folder, and re-install all the dependencies.

If that doesn't work, the easiest way we could diagnose this issue for you would be with your project's code. You can send me a GitHub link (via DM if you'd like) or a .zip file, and we'll be able to look directly at the code to see if we can figure it out.

Let me know

[joshua.millstein (Josh Millstein)]

ok, I updated repositories , still have the issue. I've made my github repo public and it is available here -->. GitHub - jmillstein/libertyhall: Libertyhall website . Thanks Ezekiel!

[joshua.millstein (Josh Millstein)]

I got it working! Went back in and ran through the prismic setup again and I guess I picked up some new packages

[Ezekiel (Ezekiel Ravidat)]

That's great! Happy to hear this worked, I'll mark it as the solution to help anyone else running into that same problem

Thanks for keeping us updated, and if you need help with anything else feel free to reach out!