PrismicLink: Missing Link Properties error message isn't helpful enough

[ReeceM]

Is your feature request related to a problem? Please describe.

I would like to suggest a feature of making the PrismicLink feedback slightly more verbose message for the Missing Link information message from the CLI.

Currently when there is an error the message is like this:

[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' }

First time seeing it, but also I have no idea which link. Especially when there is quite a lot of them...

Describe the solution you'd like

I would like to maybe see the extended information in that object maybe showing the url / uid of the document in the local CLI environment (not sure if these pop up in the browser console.)

Basically: { link_type: 'Any' , uid: 'xyz-uid-for-a-document'} is a lot easier to debug.

Describe alternatives you've considered

None.

Additional context

[ReeceM]

Also the Link class is a whole lot better than before :) 💯

[angeloashmore]

Hi @ReeceM, thanks for the suggestion! I'm glad to hear you're liking the Link component! 🙂

When that warning appears, it means the <PrismicLink> component doesn't have enough information to render the link. This means it also wouldn't have enough information to tell you which Link field caused the issue. For example, showing the UID of the page wouldn't be possible since the <PrismicLink> component doesn't have it.

To help debug the issue, <PrismicLink> will log the field it receives. That's the "{ link_type: 'Any' }" you see at the end of the message.

Now, I know that { link_type: 'Any' } doesn't give much context, but the console message should also trace the issue back to the line of code that triggered the warning. With that, you should be able to identify which <PrismicLink> component is causing an issue and perform some debugging.

---

The warning should only be emitted when an invalid Link field is passed. For example, if you're using Gatsby, you may not have included all of the GraphQL fields needed for <PrismicLink>. If you're using @prismicio/client in a Next.js project, however, Link fields should always include all of the necessary fields.

If you're seeing the warning with a link like { link_type: 'Any' }, it's possible there's a bug in the component. That value is an empty field (i.e. no link was provided in Prismic) which should not trigger the warning.

I'll do some testing on my side. 🙂

[ReeceM]

Hi @angeloashmore,

Thank you for the detailed information and also the explanation of why it may not be possible to implement more details in the exception.

Currently I am using the <PrismicLink/> component in a NextJS project. And not using GraphQL to query. I'll have a look then in the browser console side to see what is causing it.

I am not sure if the ThemeUI link component is not playing nice with it then if you say it gives the specific error of the "Any" value.

👍

[ReeceM]

Okay, so it is my blunder in a CTA slice which has two buttons. And only the primary one is filled at the moment.

Interestingly what used to work below, now renders because there is an object?

<>
{ slice?.primary?.secondaryLink ? <Link /> : null }
<>

Is that why there is the need to use the isFilled.link() helper?

This may have then just been user error on my part, if you would like you can close it Angelo 👍

[angeloashmore]

Hey @ReeceM, it turns out there was a bug in <PrismicLink>! The test to check for the warning on empty links was written incorrectly (probably an accident from copy and pasting part of the test while it was being written).

This means your code is probably correct and it was just an issue within <PrismicLink>.

It should be fixed as of v2.4.4, which you can upgrade to using the following command:

npm install @prismicio/react@latest

If you want to see more details on the fix, you can check out the PR here: #163.

Thanks for finding this issue and reporting it! 🙂

---

Is that why there is the need to use the isFilled.link() helper?

That's right; the isFilled.link() helper tells you if a Link field is filled or not. All Link fields, even empty ones, are objects containing at least a link_type property. This means something like slice?.primary?.secondaryLink will always return true, even if the field is empty.

isFilled.link() is used inside <PrismicLink>, so you shouldn't need to use it manually in your code unless you want to conditionally render content around the link, such as a wrapping <div>.

Let me know if you have any other questions and I'll try to answer them.