next/link links with hash not working

[iAdramelk]

I'm trying to render markdown docs using mdx and next-mdx-remote. I replaced standard <a> tags in docs with next/link for smoother navigation. It works, but if the link has fragment link, e. g. docs/page#about, then navigation to anchor on page load didn't work. If I just render renderOutput to dangerouslySetInnerHTML={{ __html: mdx.renderedOutput }}, then everything works correctly.

My guess is that bug happens because navigation to hash hapens at the time then hydrate is replacing the page content and there are no actual anchor on the page.

[iAdramelk]

P. S. Wrapping setResult call in additional requestIdleCallback fixed problem for me, but I'm not sure that it will work in 100% of cases:

window.requestIdleCallback(() => setResult(wrappedWithMdxProvider))

[helloworld]

@iAdramelk where did you include that snippet?

[iAdramelk]

@helloworld sorry for the late answer. At the line 60 of hydrate.js, I'm wrapping setResult(wrappedWithMdxProvider) in it.

[brandonpittman]

Same issue here.

[maximousblk]

I'm having the same problem.

I have pages/[slug].tsx which fetches mdx and renders the page. links in which [slug] is defined by me work correctly, example: on example.com/page1 if there is a link to [Section on Page 2](/page2#section-id) it works fine. but if the link only has the "hash link" like [Section on This Page](#section-id) the I get the following error:

Uncaught (in promise) Error: The provided `href` (/[slug]#section-id) value is missing query values (slug) to be interpolated properly. Read more: https://err.sh/vercel/next.js/href-interpolation-failed
    at Router._callee$ (router.ts?35b8:810)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?c973:3)
    at _next (asyncToGenerator.js?c973:25)

[josephgeis]

I'm trying to render markdown docs using mdx and next-mdx-remote. I replaced standard <a> tags in docs with next/link for smoother navigation.

Just curious: did you do this by setting the renderToString parameter on components or hydrate?

[josephgeis]

I'm trying to render markdown docs using mdx and next-mdx-remote. I replaced standard <a> tags in docs with next/link for smoother navigation.

Just curious: did you do this by setting the renderToString parameter on components or hydrate?

nevermind. turns out it's both. I digress. :)

[jescalan]

This should be resolved as of v3. Has anyone had a chance to check and confirm?

[brandonpittman]

This should be resolved as of v3. Has anyone had a chance to check and confirm?

Didn't see it mentioned in the release notes but I'll try it out! Thanks.

[jescalan]

@brandonpittman just wanted to check if you could confirm here?

[brandonpittman]

@jescalan I can confirm this works! Also, first time using the new API and it's lovely. ❤️

[jescalan]

wonderful! thanks so much. will close this one out!