PrismicLink and SvelteKit: Missing Href Attribute Issue

Developing with Prismic
1

Hello everyone,

I was testing out the integration of Prismic with SvelteKit and noticed something strange. When using the PrismicLink component to create internal links(link to document), the href attribute is removed from the anchor tag.

Here's an example of the page data I'm using to generate the links:

{
    "navbar": {
        // ...
        "data": {
            "nav_links": [
                {
                    "label": "About",
                    "link": {
                        "id": "ZPHhThIAACEAsFJp",
                        "type": "work_detail",
                        // ...
                        "uid": "1",
                        "link_type": "Document",
                        "isBroken": false
                    }
                },
                {
                    "label": "Contact",
                    "link": {
                        "link_type": "Web",
                        "url": "https://www.yahoo.com"
                    }
                }
            ]
        }
    }
}

I'm passing this data to the PrismicLink component in an each loop like this:

{#each data.navbar.data.nav_links as links}
    <PrismicLink field={links.link}>
        <p>{links.label}</p>
    </PrismicLink>
{/each}

However, the rendered output for the internal link is missing the href attribute:

<a><p>About</p></a>

Can anyone help me understand why this is happening and how to fix it? Thank you!

3

Hi @piyush.bansal.design,

Thanks for sharing this question. In the JSON that you shared, is there a navbar.data.nav_links[0].link.url property? Each link object should have a url property. If it doesn't, it's possible that you need to define the route structure for your app in the route resolver:

Let me know if that helps, or if you still have questions.

Sam

4

Hi Sam,
Route resolver was the problem, thank you for pointing it out!

1 Like