As of 8th March 2022, the latest version of ReactJS, React 18 has been released. The error "ReactDOM.render is no longer supported in React 18. Use createRoot instead." possibly arise when you initialize a new react app with: 

npx create-react-app project_name

Problem

createRoot error message

This is because the "ReactDOM.render" method which is by default used in "create-react-app" or any other template files, is deprecated in React 18. This error comes with the create-react-app by default at the time of writing this article.

However, this is a "must fix" error if you want to use the new features of React 18. If you continue to use the "ReactDOM.render" method in the root index page, the React application will continue to use React 17 API and none of the React 18 features will be available.

Solution

The following code is how the create-react-app would be if you are familiar with React version 17.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

We need to make changes to this index file and use the latest methods introduced by React 18 to make use of the latest features. The following code is how the index.js file needs to be in order to clear the errors.

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Here, we imported the "createRoot" method from "react-dom/client", which is now the default rendering method for the root of the application. Then we pass in the root element by id to the "createRoot" method and call the "render" function on it.

There could be another potential error that would arise in React 18 using "create-react-app". That is the error "createRoot(...): Target container is not a DOM element.". This can be caused by a few reasons. Check my article on why this error occurred and how to fix it.

Solved - createRoot() Target container is not a DOM element
This error occurs commonly due to either passing in the wrong “id” to the “document.getElelementById()” method or by calling the React script before the div tag with “id” in the “index.html” file.
Solved - createRoot() Target container is not a DOM elementSharooq Salaudeen

Conclusion

The errors are introduced by the latest version change to React 18 while using the same old boilerplate templates used in React 17. By using the above-provided code inside the index.js, you can tackle these errors and use the powerful new features offered by React 18.

React documentation itself has a "switch to createRoot" section which will guide you on how you can fix this issue

Hope your issues we resolved and if interested, check out my featured articles on my blog. See you in the next article. Thank you.