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"
}
}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();
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?