Wrong link showing up after building Docusaurus website

[kimlimjustin]

🐛 Bug Report

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io
• I have read the console error message carefully (if applicable)

Description

The link of the a tag on the index.jsx file went wrong when building the docusaurus website but it's all okay when running the local development.

Have you read the Contributing Guidelines on issues?

yes

Steps to reproduce

I don't think I could host the production on code sandbox, could I? However, here's the code https://github.com/kimlimjustin/xplorer/blob/master/docs/src/pages/index.jsx

Expected behavior

I hope the link is just okay (same as when development).

(Write what you thought would happen.)

Actual behavior

The link is just broken.

Docusaurus.bug.mp4

Your environment

• Public source code: https://github.com/kimlimjustin/xplorer
• Public site URL: https://xplorer.vercel.app
• Docusaurus version used: 2.0.0-beta.6
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): Chrome Version: 94.0.4606.6`, Node.js: 14.15.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows 11 Insider build

Reproducible demo

Here's the source code: https://github.com/kimlimjustin/xplorer/blob/master/docs/src/pages/index.jsx

[kimlimjustin]

Btw, I tried replacing <a> tag with the Link tag but still the same problems. Here's the code

[Josh-Cena]

Try running yarn clear? Also your site builds super fast👀

[kimlimjustin]

Try running yarn clear?

Yep, also removed all node_modules and yarn.lock and reinstall. Same bug.

[kimlimjustin]

docusaurus.bug.1.mp4

Here's the screen record.

[slorber]

This is annoying, not the first time it happens, was also reported once by the React-Native website.

This is likely a React hydration problem: https://www.joshwcomeau.com/react/the-perils-of-rehydration/

This may be a bug in the Docusaurus theme (considering you don't have much customizations), but it could as well be a React bug 😅

Can you reproduce this bug in a newly initialized Docusaurus site with the same config?

Often, adding extra paragraphs and divs around the problematic elements is a good-enough workaround.

[kimlimjustin]

Can you reproduce this bug in a newly initialized Docusaurus site with the same config?

Yes if I copy the whole document of index.jsx.

Often, adding extra paragraphs and divs around the problematic elements is a good-enough workaround.

It works, but it's just annoying since the link is on a paragraph and I have to fight against the CSS.

[slorber]

Finally I was able to find the cause, happy to get this solved!

#5629