"ReactDOM.render is no longer supported in React 18" doesn't disappear

Question

I am using React 18 and in my index.js I had the following code:

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

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

reportWebVitals();

But I upgrade the code to React 18 following a lot of StackOverflow's questions and react documentation

Now my index.js looks like this:

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

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

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

reportWebVitals();

I am using createRoot from react-dom/client but after re installing node_modules, running again and again the npm run server, cleaning the cache of google chrome, I'm still watching this error:

react-dom.development.js:86 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

It is supposed that I'm using { createRoot } now. What is the problem?

This is my package.json file:

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emoji-mart/data": "^1.0.5",
    "@emoji-mart/react": "^1.0.1",
    "@fontsource/noto-sans": "^4.5.9",
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/user-event": "^13.5.0",
    "date-fns": "^2.28.0",
    "firebase": "^9.6.10",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest --passWithNoTests",
    "eject": "react-scripts eject",
    "local:pub": "npm run build && firebase serve --only hosting",
    "lint": "eslint --fix",
    "prettier": "prettier --write .",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "lint-staged": {
    "**/*.{js,jsx}": [
      "npm run lint",
      "prettier --write ."
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@testing-library/react": "^13.0.1",
    "babel-jest": "^27.5.1",
    "eslint": "^8.16.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.30.0",
    "husky": "^8.0.0",
    "jest": "^28.1.3",
    "lint-staged": "^13.0.0",
    "prettier": "^2.6.2"
  }
}

Do I need to "clean" something? What am I missing?

Answer 1

Solved by upgrading to v14.

In older version we experienced issue.

Just install latest version

npm install --save-dev @testing-library/react@latest
npm install --save-dev @testing-library/jest-dom@latest
npm install --save-dev @testing-library/user-event@latest

Answer 2

This code:

import App from './App';
import ReactDOM from 'react-dom'
ReactDom.render(<App />, document.getElementById('root'))

Change with:

import App from './App';
import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
      root.render(<App />);