Using Tabs will break with React 18 and Docusaurus v2.3

[anaclumos]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

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

It will break when using Docusaurus v2.3 and React 18 with Tabs, when yarn building.

[ERROR] Docusaurus server-side rendering could not render static page with path /docs/in
tro.


Error: Missing getServerSnapshot, which is required for server-rendered content. Will revert to client rendering.
[ERROR] Unable to build website for locale en.
[ERROR] Error: Failed to compile with errors.
    at /sandbox/node_modules/@docusaurus/core/lib/webpack/utils.js:180:24
    at /sandbox/node_modules/webpack/lib/MultiCompiler.js:554:14
    at processQueueWorker (/sandbox/node_modules/webpack/lib/MultiCompiler.js:491:6)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
[INFO] Docusaurus version: 2.3.0
Node version: v16.15.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproducible demo

https://codesandbox.io/s/hungry-hodgkin-2z1jdc

Steps to reproduce

1. Install a fresh Docusaurus 2.3
2. yarn add react@18 react-dom@18
3. Add the following:

   import Tabs from '@theme/Tabs';
   import TabItem from '@theme/TabItem';
   
   <Tabs>  
   <TabItem value="option 1" label="option 1">
   
   1
   
   </TabItem>  
   <TabItem value="option 2" label="option 2">
   
   2
   
   </TabItem>  
   </Tabs>  
   

4. yarn dev works. yarn build fails.

Expected behavior

The build should not fail.

Actual behavior

The build fails.

Your environment

• Public source code: https://codesandbox.io/s/hungry-hodgkin-2z1jdc
• Public site URL: https://2z1jdc.sse.codesandbox.io/docs/intro
• Docusaurus version used: 2.3
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v16.15.1
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): CodeSandBox

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Thanks for the report. This is due to the use of useSyncExternalStore.

[slorber]

Not sure to understand why you want to use React 18 here @anaclumos , we don't officially support it so do we really want to qualify this as a bug? Similarly, if you decide to use Docusaurus 2.3 with React 0.13, things will break 🤷‍♂️

Technically there's probably a way to make it work under React 18 but is it really worth it to invest time in solving this?
You could stick to React 17 until we provide official React 18 support?

We could as well make any Docusaurus site on React !== 17 fail fast and print a good error message that we do not support React 18?

It's not because it "seems to work" that it actually do, there might be subtle hydration bugs triggered by using React 18, for which we don't want to spend time on support.

Our peer deps do not include React 18 atm. Are we even sure that sites using React 18 aren't running duplicate non-hoisted React copies?

  "peerDependencies": {
    "react": "^16.8.4 || ^17.0.0",
    "react-dom": "^16.8.4 || ^17.0.0"
  },

---

Edit: apparently yarn will not report any error but npm will do:

➜  website npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @babel/plugin-syntax-jsx@7.12.1
npm WARN Found: @babel/core@7.12.9
npm WARN node_modules/@babel/plugin-syntax-jsx/node_modules/@babel/core
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @babel/core@"^7.0.0-0" from @babel/plugin-syntax-jsx@7.12.1
npm WARN node_modules/@babel/plugin-syntax-jsx
npm WARN   @babel/plugin-syntax-jsx@"7.12.1" from remark-mdx@1.6.22
npm WARN   node_modules/remark-mdx
npm WARN   1 more (@mdx-js/mdx)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @docusaurus/core@2.3.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18" from the root project
npm ERR!   peer react@">=0.14.9" from prism-react-renderer@1.3.5
npm ERR!   node_modules/prism-react-renderer
npm ERR!     prism-react-renderer@"^1.3.5" from the root project
npm ERR!     prism-react-renderer@"^1.3.5" from @docusaurus/theme-classic@2.3.0
npm ERR!     node_modules/@docusaurus/theme-classic
npm ERR!       @docusaurus/theme-classic@"2.3.0" from @docusaurus/preset-classic@2.3.0
npm ERR!       node_modules/@docusaurus/preset-classic
npm ERR!         @docusaurus/preset-classic@"2.3.0" from the root project
npm ERR!     1 more (@docusaurus/theme-common)
npm ERR!   14 more (react-dom, react-helmet-async, react-loadable, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.4 || ^17.0.0" from @docusaurus/core@2.3.0
npm ERR! node_modules/@docusaurus/core
npm ERR!   @docusaurus/core@"2.3.0" from the root project
npm ERR!   @docusaurus/core@"2.3.0" from @docusaurus/plugin-content-docs@2.3.0
npm ERR!   node_modules/@docusaurus/plugin-content-docs
npm ERR!     @docusaurus/plugin-content-docs@"2.3.0" from @docusaurus/preset-classic@2.3.0
npm ERR!     node_modules/@docusaurus/preset-classic
npm ERR!       @docusaurus/preset-classic@"2.3.0" from the root project
npm ERR!     3 more (@docusaurus/theme-classic, @docusaurus/theme-common, @docusaurus/theme-search-algolia)
npm ERR!   10 more (@docusaurus/plugin-google-analytics, ...)
npm ERR! 
npm ERR! Conflicting peer dependency: react@17.0.2
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8.4 || ^17.0.0" from @docusaurus/core@2.3.0
npm ERR!   node_modules/@docusaurus/core
npm ERR!     @docusaurus/core@"2.3.0" from the root project
npm ERR!     @docusaurus/core@"2.3.0" from @docusaurus/plugin-content-docs@2.3.0
npm ERR!     node_modules/@docusaurus/plugin-content-docs
npm ERR!       @docusaurus/plugin-content-docs@"2.3.0" from @docusaurus/preset-classic@2.3.0
npm ERR!       node_modules/@docusaurus/preset-classic
npm ERR!         @docusaurus/preset-classic@"2.3.0" from the root project
npm ERR!       3 more (@docusaurus/theme-classic, @docusaurus/theme-common, @docusaurus/theme-search-algolia)
npm ERR!     10 more (@docusaurus/plugin-google-analytics, ...)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/sebastienlorber/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sebastienlorber/.npm/_logs/2023-02-02T11_47_28_272Z-debug-0.log

[slorber]

Fix was easy so we'll merge/release it, but I don't particularly recommend React 18 for now. Other similar things might break and we don't even build our own site under React 18 with our CI so we are less likely to notice when things break.

PR: #8618

[slorber]

please test the canary release and let me know if this doesn't work. On a newly initialized site it works 👍

[incepter]

Hey @slorber ; I just had the same issue and I was coming here to create it :-) Thanks for resolving it already

I honestly didn't pay attention to react version support, I have it in my monorepo more than year now I didn't have problems.

The reason for me to use react 18 is that it I use it practically everywhere I use React. Especially in the monorepo of my library. I think I can downgrade react specifically for the docs package (I didn't know about this), but I think waiting for the patch is worth it.

Please let us know when it may get released ? Thanks again.

[Josh-Cena]

Re: why many use React v18, it's because of the nice hooks like useId(), which is necessary for a11y.

[anaclumos]

Just an FYI, I use React 18 for useId() and https://github.com/shuding/react-wrap-balancer