# PrismicNextLink throwing error when trying to deploy

**URL:** <https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902>\
**Category:** Developing with Prismic\
**Tags:** nextjs\
**Created:** [October 29, 2024, 4:27pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902 "2024-10-29T16:27:29Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [October 29, 2024, 4:27pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/1 "2024-10-29T16:27:30Z")

</div>

Hello. I followed the nextjs tutorial found here --\> [https://www.youtube.com/watch?v=nfZu56KsK\_Q&t=1808s](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?

```auto
    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}  
/\>  
);  
}`

```auto
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}
        />
    );
}

```

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [October 31, 2024, 8:34am UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/3 "2024-10-31T08:34:40Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [October 31, 2024, 3:40pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/4 "2024-10-31T15:40:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [October 31, 2024, 3:45pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/5 "2024-10-31T15:45:07Z")

</div>

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

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

```

 ![Screen Shot 2024-10-31 at 10.45.51 AM](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/f/f378bf170ceb8e19ab173aff7bfc241e474fe615.png)

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [October 31, 2024, 3:47pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/6 "2024-10-31T15:47:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [October 31, 2024, 10:03pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/7 "2024-10-31T22:03:15Z")

</div>

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

and this...

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

```

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [November 4, 2024, 9:08am UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/8 "2024-11-04T09:08:42Z")

</div>

> 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](https://prismic.io/docs/technical-reference/prismicio-next#prismicnextlink) 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](https://community.prismic.io/t/typescript-issue-with-prismicnextlink/17781/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!"

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [November 4, 2024, 10:23pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/9 "2024-11-04T22:23:10Z")

</div>

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.

```auto
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;
}> & {

```

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [November 6, 2024, 8:14am UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/10 "2024-11-06T08:14:32Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [November 6, 2024, 5:44pm UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/11 "2024-11-06T17:44:35Z")

</div>

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](https://github.com/jmillstein/libertyhall) . Thanks Ezekiel!

---

<div class="post-metadata">

**Author:** ![joshua.millstein](https://avatars.discourse-cdn.com/v4/letter/j/90ced4/32.png) [@joshua.millstein](https://community.prismic.io/u/joshua.millstein)\
**Post date:** [November 7, 2024, 4:50am UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/12 "2024-11-07T04:50:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ezekiel](https://avatars.discourse-cdn.com/v4/letter/e/848f3c/32.png) [@Ezekiel](https://community.prismic.io/u/Ezekiel)\
**Post date:** [November 7, 2024, 8:51am UTC](https://community.prismic.io/t/prismicnextlink-throwing-error-when-trying-to-deploy/17902/13 "2024-11-07T08:51:00Z")

</div>

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!