feat: React 18

[seyoon20087]

Breaking change

React version lower than 18 will now trigger an early error. Please make sure your site is using the new React version—you can declare dependency on React v18 specifically for Docusaurus, if you are in a monorepo with another version of React.

Motivation

React 18 is now officially released.

Unfortunately Docusaurus is still using legacy APIs on the client (as of now). This PR attempts to migrate off from legacy client APIs (like ReactDOM.hydrate to ReactDOMClient.hydrateRoot) by following the guide from https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html. This should remove development warnings such as the one described in the React blog.

Legacy React versions would not continue to work due to the new ReactDOM rendering APIs. We've added a new early error.

Known Issue

Currently React throws a hydration error (#418 or #423) on the built HTML files (whether or not they are deployed). This is intended to exist in React 18 and should not break any part of the app, but may affect the Lighthouse score. In the meantime, you may ignore it. Related issue: facebook/react#24125

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Site runs

Related PRs

N/A

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	068703e
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6252558971d84d0009c7b6fc
😎 Deploy Preview	https://deploy-preview-7102--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	69
🟢 Accessibility	100
🟠 Best practices	83
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7102--docusaurus-2.netlify.app/

[Josh-Cena]

NPM is unhappy with installing React 18 because MDX declares React 17 as peer dependency. I will wait for @slorber to decide what's the plan here—because that means if we don't upgrade to MDX v2, upgrading to React 18 is simply going to make every package manager slightly unhappy. Moreover, the console error is very, very disturbing.

[Josh-Cena]

@seyoon20087 Apologies if Sebastien didn't make it clear enough, but we'll probably not accept this PR because it will be quite a while before we have time to investigate proper migration to MDX v2 and hence React v18. We may keep this open but our PR backlog is already pretty bloated (currently 3:1 issue/PR ratio, which is outstanding among other OSSs), so it could be closed for housekeeping.

We require non-trivial PRs like this to have a matching issue, exactly because (a) you don't waste time implementing something we don't immediately need and (b) if the PR is rejected we can still keep it in backlog. Given the reasonings Sebastien has given above, could you first send a proposal about migration to React 18, similar to what we had for React 17, so we can investigate how to progressively roll it out, what dependencies are blocking this, what refactors we need to make, etc.?

[seyoon20087]

... Sorry, we are not interested in maintaining a fork of MDX. Please refrain from making these architectural changes without first discussing with us. Thanks!

I am doing this because the original @mdx-js/react package has a peer dep of react 17 which causes this issue (related to this: vercel/next.js#35707)

[Josh-Cena]

Yes, I understand, but if it involves forking the entire dependency I'd rather wait and find a better solution :)

[Josh-Cena]

Opened #7264. @seyoon20087 Thank you very much for spending your time on this, but I don't think this PR will land any time soon, and it's a quite substantial change so it'll require roadmapping and design efforts from the team. I'll close the PR for now, but we'll eventually revisit the migration in the future when we have better vision of what we need to do and how we will do it.

In the future, for any substantial feature PRs (you have made quite a few, including strict mode, route announcer, etc.), please remember to first open an accompanying issue. It's mentioned in the contributing guideline.