Hydration fails on learn/getting-started/debugging but page renders successfully

[abizek]

URL:

https://nodejs.org/en/learn/getting-started/debugging

Browser Name:

Chrome

Browser Version:

125.0.6422.60

Operating System:

Pop!_OS 22.04

How to reproduce the issue:

Reproduce by visiting the Debugging Node.js page via link or sidebar.

The issue is exaggerated locally, where you can't visit the page and are redirected to the global error boundary. I debugged Debugging Node.js page 😄 and the issue is with how rehype-autolink-headings is used and with the specific formatting used only in this page. The wrap behavior of rehype-autolink-headings and having links in headings leads to nested anchor tags which the next.js link component doesn't like.

There are 10 headings with links and this is the first one. https://github.com/nodejs/nodejs.org/blob/5d23642f35d4bf38878d07158028d31dda4d5ac5/pages/en/learn/getting-started/debugging.md?plain=1#L72

Possible ways I can think of to fix

• Modify the behavior of rehype-autolink-headings (Too big of a change, unnecessary)
• Change the formatting of the Debugging Node.js page. (Depends on the solution, Is it okay to have links below the headings? Is it okay to remove headings and have just the links and lose section links in the meta bar instead?)

[ovflowd]

Change the formatting of the Debugging Node.js page. (Depends on the solution, Is it okay to have links below the headings? Is it okay to remove headings and have just the links and lose section links in the meta bar instead?)

That's a fine solution for me :)

[abizek]

Which solution to be exact? :sweat_smile: Having the links below headings?

[ovflowd]

Which solution to be exact? 😅 Having the links below headings?

I quoted the solution of having the links below headings, yes.