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

[jeffdlange]

Steps to reproduce

1. import ReactRailsUJS from 'react_ujs'; in your app
2. Make a call to ReactRailsUJS.mountComponents(someElement);
3. Visit a page that includes one or more React components rendered using react-rails (e.g. <%= react_component 'Foo' %>)
4. The following warning will appear in the JS console:

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

Trace:

With the breadcrumbs leading to the following culprit: https://github.com/reactjs/react-rails/blob/v2.7.0-rc.0/react_ujs/src/renderHelpers.js#L16

It appears that renderHelpers.js is importing the default ReactDOM from react-dom, but at the time that it accesses ReactDOM.createRoot the warning shows up.

Expected behavior

ReactRailsUJS should be able to render components without triggering any warnings

Actual behavior

Warning is triggered. This isn't a showstopper yet, but will be once React 19 is released, and creates a lot of noise in the JS console.

System configuration

• Shakapacker or Sprockets version: we are using vite_ruby 3.2.15
• React-Rails version: 2.6.1 and 2.7.0.rc.0
• React_UJS version: 2.6.2 and 2.7.0.rc.0
• Rails version: 6.1.7.2
• Ruby version: 3.2.0

[justin808]

@jeffdlange Thanks for the writeup. I think we've got a similar error for React on Rails.

CC: @ahangarha, @Judahmeek

[justin808]

Take a look at this:

https://github.com/shakacode/react_on_rails/blob/e6e9f25188307a955b379821fb49b9e392b9e512/node_package/src/reactHydrateOrRender.ts#L12-L24

and 828ee36#r103944642

I think that is the fix.

@jeffdlange can you try this?

[jeffdlange]

Thanks Justin, I will try that out report back

[jeffdlange]

@justin808 I and a colleague did some monkey-patching with the code you linked, and that did seem to resolve the warning; however, we have another warning and it isn't clear whether it's coming from us or react-rails 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.

We were also concerned about the amount of monkey-patching we were doing, and whether we would cause other issues as we attempt to silence the warnings. For now, we've decided to endure the warnings as we await an official patch from react-rails. Thank you for your help! 🙏

[ahangarha]

@jeffdlange I am going to work on this issue in the following days.

[enankerv]

I think I figured out a workaround, I went into react_ujs/src/renderHelpers.js and just added an import statement:
import { createRoot } from 'react-dom/client';

and changed all of the ReactDom.createRoot to just use the imported createRoot method.

[ahangarha]

@enankerv Yes. We just need to do this dynamically to make sure we import the right thing depending on the installed React version.

@jeffdlange
Please use 1269 and give feedback.

[jeffdlange]

@ahangarha Hey, thanks for checking in. Just a couple weeks back one of my coworkers rolled our own react rendering solution and removed our react-rails dependency, so I won't be able to check up on this solution.

Thank you for all your efforts here, and good luck on the project 🙏

[lcampanari]

@jeffdlange What ended up being your solution for rendering react with vite_ruby?