Hydration failed because the initial UI does not match what was rendered on the server.

[Zamiell]

Hydration failed because the initial UI does not match what was rendered on the server.

[slorber]

Sorry, didn't see your instructions above.

Indeed I can reproduce the issue, and get the following errors in dev mode:

react-dom.development.js:86 Warning: Expected server HTML to contain a matching <ul> in <p>.
react-dom.development.js:12507 Uncaught Error: Hydration failed because the initial UI does 
react-dom.development.js:86 Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.
react-dom.development.js:86 Warning: validateDOMNesting(...): <ul> cannot appear as a

This is not a valid repro because it is forbidden to put ul in a paragraph, as stated in the error message.

<p>
        <ul>
          <li>foo</li>
          <li>bar</li>
        </ul>
</p>

You can find many resources related to what cause hydration errors in React online. Those apply to Docusaurus as well.

[slorber]

This is likely not a regression: it was a hydration error that was already there, but React did not tell you about it.

React < 18 did not tell you about such problems, and now it does.

https://react.dev/blog/2022/03/08/react-18-upgrade-guide#other-breaking-changes:~:text=Stricter%20hydration%20errors

The init template of Docusaurus does not have such hydration errors, so it is very likely your code that produces such problems. Try to remove your code until it fixes the problem. Running in docusaurus build --dev mode might help identify the problematic code (although in my experience it also produces false positive errors)

[Zamiell]

Thanks. Using the trick of --dev, I isolated the problem to a bulleted list.

To reproduce the problem, you can use the following steps:

npx create-docusaurus@latest my-website classic --typescript
cd my-website
npm run build && npm run serve

Obviously, observe that there are no errors (since it is a fresh template).
Then, open "./src/components/HomepageFeatures/index.tsx" and change the following text:

      <>
        Docusaurus was designed from the ground up to be easily installed and
        used to get your website up and running quickly.
      </>

To this:

      <>
        <ul>
          <li>foo</li>
          <li>bar</li>
        </ul>
      </>

Then, run npm run build && npm run serve, and you will see the same run-time errors that I was describing in the OP.

Any idea what is wrong? I tried a few things, including changing the fragment (i.e. <>) to <div>, but nothing I tried got past this error.

[slorber]

I don't know what the problem is.
Sometimes an external script, or even a browser extension, can lead to such hydration errors

[Zamiell]

I can reproduce the issue on Microsoft Edge, which does not have any browser extensions. Thus, I assume that this is reproducible for everybody by copy-pasting the steps from my previous post (not OP). Do you want me to open a new issue?

[slorber]

If you want to open an issue, please create a minimal repro instead of giving us a link to an existing site. Start from a brand new Docusaurus site, and add the smallest possible changes to make the issue appear.

I can't spend hours investigating your existing site and removing things one by one until we know what causes the problem, so I kindly ask you to do this investigation first before opening this issue. If you can't repro from a newly initialized site, that's likely a bug you introduced, by using code or a third-party plugin that has a bug.