Issue importing createRoot from "react-dom" in React on Rails

Question

I am trying to create a React on Rails project for the first time. I have

"react": "^18.2.0",
"react_ujs": "^2.6.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",

And I am trying to create a router (as per the tutorial here)

import React from "react"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

import PropTypes from "prop-types"
class App extends React.Component {
  render () {
    return (
      <Router>
        <Routes>
          <Route exact path="/" render={() => ('home') } />
          <Route path="/hello" render={() => <HelloWorld greeting="Friend" />} />
        </Routes>
      </Router>
    );
  }
}

export default App

The error I keep getting is Warning: You are importing createRoot from react-dom which is not supported. You should instead import it from react-dom/client. "rails"

I have researched this thoroughly, and there are many explanations on how to solve it for pure react, but none about react on rails as far as I can find. One suggestion was to deprecate the react-dom version, but it was obviously highly disrecommended. Can anyone tell me what I should do?

Answer 1

Someone solved it for me:

The tutorial is using outdated syntax. The correct syntax should be something like:

import React from "react"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import PropTypes from "prop-types"

import HelloWorld from './HelloWorld';

class App extends React.Component {
  render () {
    return (
      <Router>
        <Routes>
          <Route exact path="/" element={<h1>Hello World</h1>} />
          <Route path="/hello" element={<HelloWorld greeting="Friend" />} />} />
        </Routes>
      </Router>
    );
  }
}

export default App

using element= instead of render= and without the function () =>