React 18.3 - new console warnings

[pixelass]

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

When I look at the console I am spammed with warnings on a fresh install of docusaurus.

Am I missing something?

I also tried Repro but that also does not work.

1. Codesandbox is not free anymore
2. stackblitz cannot install the dependencies

Reproducible demo

I would love to but your repros don't work

Steps to reproduce

1. install a new docusaurus with npx create-docusaurus@latest documentation classic
2. Check the console (see attached screenshot)

Expected behavior

Console should not war about Loadable component and ReactDOMClient.createRoot()

Actual behavior

The console is spammed with warnings

Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

Warning: LoadableComponent uses the legacy contextTypes API which is no longer supported and will be removed in the next major release. Use React.createContext() with static contextType instead.

Your environment

• Public source code: still in local development
• Public site URL: development warnings only
• Docusaurus version used:

"dependencies": {
    "@docusaurus/core": "3.2.1",
    "@docusaurus/preset-classic": "3.2.1",
    "@mdx-js/react": "^3.0.0",
    "clsx": "^2.0.0",
    "prism-react-renderer": "^2.3.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  }

• Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v20
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Unrelated (using Windows 11)

Self-service

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

[slorber]

This is fixed for the next release, planned for tomorrow.

Until then you can downgrade to React 18.2 which does not have this warning

#3841 (comment)

[pixelass]

@slorber thank you for the fast response. In this case please feel free to close this issue.
I can hide error logs in the console if they annoy me.

No worries. These things happen in this fast evolving landscape.

But tomorrow it'll be fixed.. Promise? No Backsies 🤣

[slorber]

Yes it will be fixed today, working on it right now. (#10101)

Note you are using Chrome 89, a quite old version that's probably why StackBlitz does not work.

---

Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

I am unable to reproduce this warning and did not do anything to fix it.

If you can still reproduce it, please tell me the exact steps, including how you run Docusaurus and which page exactly you see the error on (including how you opened that page, between a browser page load or a navigation action). This issue does not contain those details atm but they are important to figure out problems.

[pixelass]

@slorber thx for the update. I can confirm that most warnings are gone on v3.3.0 ❤️.

I still get this warning ReactDOMClient.createRoot(), it happens on hot-reloading.

I'll try to reproduce it on a clean MVP project and send you the github repo if I can reproduce it there.

Thanks so far. Super helpful.

[pixelass]

@slorber
I just tested it in a completely clean instance (no modifications).
You can just do the following:

• run npx create-docusaurus@latest docusaurus-demo classic
• update to react 18.3.1
• update to docusaurus 3.3.0
• run npm start
• open web console
• go to index.tsx and change adjust the text
• see console error

If it helps, I can upload the repo but the steps above should be super clear and probably just as easy as cloning a repo with those adjustments already in place.

[pixelass]

@slorber BTW. I am not using v89 of chrome 🤣 that is the example that was provided by your issue template. I just added v20 of Node after the colon and did not mention the chrome version at all as it was irrelevant to this issue.

Environment name and version (e.g. Chrome 89, Node.js 16.4): Node v20
Operating system and version (e.g. Ubuntu 20.04.2 LTS): Unrelated (using Windows 11)

I guess you are referring to this (e.g. Chrome 89, Node.js 16.4)

Maybe it is wiser to put the example text in an HTML comment instead of parentheses, to prevent this misunderstanding in future bug reports.

[pixelass]

https://github.com/pixelass/docusaurus-bug-report-000001

MVP reproduction for the issue on hot-reloading

You can just do the following:

• clone the repoitory
• run npm i or yarn
• run npm start or yarn start
• open web console
• go to index.tsx and change any text and save
• see console error

[slorber]

THanks yes, I can reproduce now.

I'll have to publish a v3.3.1 soon then 😅

[slorber]

Apparently this warning was also there in v18.2 😅

Will be fixed in v3.3.1 thanks to #10103

[pixelass]

Community is everything 😄