PrismicLink is rendering nested 'a' elements, causing hydration error

Developing with Prismic
1

Packages:

"@prismicio/client": "^6.7.1",
    "@prismicio/helpers": "^2.3.3",
    "@prismicio/next": "^0.1.5",
    "@prismicio/react": "^2.5.0",
    "@prismicio/slice-simulator-react": "^0.2.2",
    "next": "12.3.0",
    "react": "18.2.0",

I did follow the guide en example repo, but still got a really weird behaviour. Tried to figure it out myself, but maybe I am overlooking something small and stupid...

I fetch my menu through staticProps and I map over them like this:

  {menu.data?.links.map((menuLink, index) => (
                    <li key={menuLink.label}>
                      <PrismicLink field={menuLink.link}>
                        <span className="text-base font-medium text-gray-500 hover:text-gray-900">
                          test
                        </span>
                      </PrismicLink>
                    </li>
                  ))}

I mean, how on earth does it render <a href="/"><a>test</a></a> ?

3

Hey @dfmkraaijeveld, which starter did you use?
I'd like to try and reproduce the error on my end.

4

Sorry! I did turn on the experimental NextLink feature which doesn't accept any A tags within NextLink. So I did change the internalLinkComponent and now everything is fine. Sorry for not closing this topic!

1 Like