React compatibility: createRoot import and usage updates to remain compatible with new versions of React

[coder-karen]

Fixes #38480

Proposed changes:

• This PR fixes one issue related to createRoot that was generating 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.

• This occurred in tooltips-plugin.ts, affecting the Boost dashboard. In this case, due to the layout of the component, the rendering and then createRoot were happening in two different hooks, and it appears that createRoot was then being called more than once. By checking if root already exists, we prevent this warning and issue.

Initially the PR attempted to also address the following console warning, however this turns out only to be an issue with development builds (see the comment below), so that commit was removed.

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

Other information:

• Have you written new tests for your changes, if applicable?
• Have you checked the E2E test CI results, and verified that your changes do not break them?
• Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

#38480

Does this pull request change what data or activity we track or use?

No.

Testing instructions:

Replicating the issue:

• I was able to replicate the console warning by using a Jurassic Tube test site or on Jurassic Ninja, assuming script debug was enabled in wp-config.php: define( 'SCRIPT_DEBUG', true );. Testing in trunk (or bleeding edge on JN).
• The console warning is 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.. (ignore the other createRoot console warning, mentioned in 'Proposed Changes' above).
• Open up the Boost dashboard at /wp-admin/admin.php?page=jetpack-boost

Testing the fix:

• Apply this PR, and if testing locally you will need to re-build the js-packages/components package, and plugins/boost. In the beta tester plugin, apply the PR to the Boost plugin.
• Visit the link mentioned above, and you should no longer see the browser warning.

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the fix/create-root-react-19-compat branch.

  • For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

• To test on Simple, run the following command on your sandbox:

  bin/jetpack-downloader test jetpack fix/create-root-react-19-compat
  

  bin/jetpack-downloader test jetpack-mu-wpcom-plugin fix/create-root-react-19-compat
  

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

---

Boost plugin:

• Next scheduled release: none scheduled.

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

[anomiex]

• The second console warning was:

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

• In all cases we were importing * as WPElement from '@wordpress/element', and generally then rendering in this fashion: WPElement.createRoot( container ).render( component );.

That doesn't seem right, @wordpress/element already exports createRoot from react-dom/client.

Looks like what's going on is this:

• In development mode react-dom/client returns a wrapped copy of the createRoot function from react-dom that suppresses the warning from the development-mode version of react-dom. In production mode it skips the wrapper, which works because production-mode react-dom doesn't contain the warning.
• @wordpress/dependency-extraction-webpack-plugin doesn't extract react-dom/client, only react-dom. So the contents of react-dom/client get included in the package bundles, while any react-dom imports (including the one inside react-dom/client) get extracted to refer to window.ReactDom.
• Since @wordpress/element is compiled for production mode, it embeds the unwrapped version from react-dom/client.
• If that @wordpress/element gets used with an extracted production build of react-dom, everything works. But if it gets a development build of react-dom, that includes the warning and the wrapper from react-dom/client isn't there to suppress it.
  • Without the Gutenberg plugin, WordPress supplies a production build in window.ReactDom. 🆗
  • With the Gutenberg plugin but SCRIPT_DEBUG off, Gutenberg supplies a production build in window.ReactDom. 🆗
  • With the Gutenberg plugin and SCRIPT_DEBUG on, Gutenberg supplies a development build in window.ReactDom. 💥

The changes in this PR to import react-dom/client directly won't do any good, because they'll run into the same problem when built with jetpack build --production.

[coder-karen]

I'm glad you jumped in here @anomiex , I realized something was amiss when I couldn't replicate the fix on a Jurassic Ninja site.

That'll simplify this PR hugely, thank you for explaining what was likely going on. I'll remove everything except the fix for the separate Boost issue.

[anomiex]

Looks reasonable to me.