create-react-app typescript - Warning: ReactDOM.render is no longer supported in React 18-CodePudding

I got this warning in my project generated by create-react-app with Typescript and although I followed Reactjs.org instructions and some other other questions posted in StackOverflow I couldn't make the warning off.

Could someone explain me why I still see the warning related to ReactDOM?

Thank you in advance.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import App from "./App";

const container = document.getElementById("root")
const root = createRoot(container!);

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

reportWebVitals();

{
  "name": "pokedex",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@chakra-ui/react": "^1.8.8",
    "@emotion/react": "11",
    "@emotion/styled": "11",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.27",
    "@types/react": "^18.0.5",
    "@types/react-dom": "^18.0.1",
    "@types/styled-components": "^5.1.25",
    "axios": "^0.26.1",
    "framer-motion": "6",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0",
    "eslint-plugin-react": "^7.29.4"
  }
}

CodePudding user response：

try :

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "./reportWebVitals";
import App from "./App";

const container = document.getElementById("root") as HTMLElement;
const root = ReactDOM.createRoot(container);;

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

reportWebVitals();

CodePudding user response：

On the second day, the warning disappeared.

Yesterday I stooped and restarted the project but the ReactDOM warning kept it showing.

Earlier today, I made some settings for VSCode which led me to close it and then opened the editor again. I didn't restart Windows10, no necessity for it. After some period of time I notice the warning disappearance.

Could VScode restarting after 'src/index.tsx' updating be a solution for this strange case?