React PrismicLink component causing error when not set (on local dev environment)

Developing with Prismic
1

I am using Prismic in combination with Next.js to build a marketing website.

After making some changes to the content from the Prismic UI, I encountered some problems on my development environment.

I have a slice with a title, description, ctaUrl, ctaLabel and image.
After updating the content I am getting the following error:

[PrismicLink] This "field" prop value caused an error to be thrown.
{ link_type: 'Any' }
Error: [PrismicLink] The provided field is missing required properties to properly render a link. The link may not render. For more details, see https://prismic.dev/msg/react/v2.4.1/missing-link-properties

The strange thing is that his only happens locally and not after building the site on vercel, which looks at the same data source.

The error doesn't occur when I remove the link from the slice.

When looking at the response from the query to Prismic I am getting back the link_type: 'Any' for empty links. It seems like the component is expecting more, which is not available due to the empty link field.

PAGE.data.slices[1].primary.ctaUrl { link_type: 'Any' }
PAGE.data.slices[2].primary.ctaUrl { link_type: 'Any' }
PAGE.data.slices[3].primary.ctaUrl { link_type: 'Any' }
PAGE.data.slices[4].primary {
  title: [
    {
      type: 'heading1',
      text: 'Title text',
      spans: []
    }
  ],
  description: [],
  link: {
    id: 'YnGv_hcAACkAatST',
    type: 'page',
    tags: [],
    lang: 'nl-nl',
    slug: 'time-to-get-in-touch',
    first_publication_date: '2022-05-03T22:44:26+0000',
    last_publication_date: '2022-06-07T11:05:05+0000',
    uid: 'contact',
    url: '/contact',
    link_type: 'Document',
    isBroken: false
  },
  linkLabel: 'Contact us',
  image: {
    dimensions: { width: 1925, height: 1025 },
    alt: null,
    copyright: null,
    url: 'https://images.prismic.io/tiny/..............jpeg?auto=compress,format'
  }
}

In the slice I was previously checking if the link is available by checking for the entire field:

{slice?.primary?.ctaUrl && (
  <PrismicLink
    field={slice.primary.ctaUrl}
    className="inline-flex rounded-md border border-transparent bg-sg-grey-2 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-sg-grey-4"
  >
    {slice.primary.ctaLabel}
  </PrismicLink>
)}

However, as a workaround I need to check if the url on the field exists, as this is available for document, media or web links.

{slice?.primary?.ctaUrl?.url && (
  <PrismicLink
    field={slice.primary.ctaUrl}
    className="inline-flex rounded-md border border-transparent bg-sg-grey-2 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-sg-grey-4"
  >
    {slice.primary.ctaLabel}
  </PrismicLink>
)}

Is this something on purpose, or did something on my environment change for this to happen?

2

Related discussion on Github - PrismicLink output if not enough attributes are passed in · Issue #150 · prismicio/prismic-react · GitHub

1 Like
4

Hello @moorenmike

It seems the issue has been merged and published in @prismicio/react@v2.4.2.To update, install the latest version:


npm install @prismicio/react@latest

Could you update and let us know if it fixes the issue?

Thanks,
Priyanka

5

Hi @Priyanka ,

Thanks for your reply.
It looks like the issue that causes the page to crash has been resolved.
The error still appears in the console though:

[PrismicLink] The provided field is missing required properties to properly render a link. The link may not render correctly. For more details, see https://prismic.dev/msg/react/v2.4.2/missing-link-properties { link_type: 'Any' }

Cheers,
Mike

7

@moorenmike I'm not sure why you're still seeing this warning if the error isn't there. I'll send this to the dev team so they can take a look