React 18.3 - new console warnings about docusaurus

[slorber]

Apparently this warning was also there in v18.2 😅

Will be fixed in v3.3.1 thanks to #10103

[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 😅

[pixelass]

Community is everything 😄