Browser console warning about React 18 and ReactDOM.render

[swiftone]

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?

[naymyo2241]

I have been replaced in the index.js for that error as ..

import React from 'react';
import ReactDOM from "react-dom/client";

import './index.css';
import App from './App';

ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode></React.StrictMode>);

[jpierson-at-riis]

I may have commented in the wrong place after reading this but I had found the issue reported from the default test when running it after an initial new project setup with create-react-app.

testing-library/react-testing-library#509 (comment)

[gaearon]

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?

No, I don't think it would make sense, since it would lead to people accidentally creating projects with old React all the time. (There is generally no reason to update a global CRA so very few people who install it would do that.)

The real fix is to fix the template and get a CRA patch out.

[swiftone]

There is generally no reason to update a global CRA so very few people who install it would do that

Perhaps a warning when the expected major version doesn't match? I understand encouraging up-to-date CRA, but "CRA will break randomly, and when it does the solution is to wait" doesn't sound like a great solution either.

Edit: Kudos to the React team for making recent major version upgrades pretty painless, but there's no guarantee that will always be possible, or that people don't stick with an old CRA until multiple version bumps occur, where the errors are fatal.

[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();

[tmshchk]

I replaced the code in the index.js with this one, the error disappeared. Waiting for the fixes here:

import ReactDOMClient from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOMClient.createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

[Vimz92]

You can make: npm install react@18 react-dom@18

import React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render()

This will fix.

[matias-retargetly]

this work for me

import { StrictMode } from 'react';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

var ReactDOM = require('react-dom/client');
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container as HTMLElement);

const app = (
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

root.render(app);

reportWebVitals();

"dependencies": { "@emotion/react": "^11.9.0", "@emotion/styled": "^11.8.1", "@fontsource/roboto": "^4.5.5", "@mui/icons-material": "^5.6.1", "@mui/material": "^5.6.1", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.4.1", "@types/node": "^16.11.26", "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.3.0", "react-scripts": "5.0.0", "typescript": "^4.6.3", "web-vitals": "^2.1.4" },

[HACISTEIN]

npm i --save-dev @types/react-dom // if client not declare at the end of the command line, use this before...