Browser console warning about React 18 and ReactDOM.render

Describe the bug

Now that React 18 is released, creating a new project (npx create-react-app my-project) and running that project will show the browser console warning:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning @ react-dom.development.js:86

The project DOES run, however.

Did you try recovering your dependencies?

N/A as a new project

npm --version is: 8.1.4

Which terms did you search for in User Guide?

Didn’t find anything for “React 18” or “render” or “ReactDOM”

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/swiftone/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 12.1
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: Not Found
    npm: 8.1.4 - ~/.nvm/versions/node/v16.13.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.2
  npmPackages:
    react: ^18.0.0 => 18.0.0
    react-dom: ^18.0.0 => 18.0.0
    react-scripts: 5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app my-project
2. cd my-project
3. npm start
4. (view console in browser)

Expected behavior

No browser console errors

Actual behavior

Reproducible demo

Any project, see steps to reproduce

[swiftone]

While this should be a pretty trivial fix to the template, I must admit I was a bit surprised CRA just installed a different major version of React - wouldn’t it make sense to have a setting for the major version or React it assumes?

[pdevyatov]

Working example in TypeScript with react-router v6:

import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { StrictMode } from 'react';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';

const container = document.getElementById('root');
const root = createRoot(container as HTMLElement);
const app = (
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

root.render(app);

reportWebVitals();