Why render error in react v18 occures although I do not use legacy code?

Question

Hy, guys! I have a render error in my react v18 code like this:

Warning: 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

I don't use legacy ReactDom.Render() but error occures anyway. Here is my code:

import React from 'react';
import {createRoot} from 'react-dom/client';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import {Layout} from './layout';
import {Home} from './home';
import {About} from './about';
import {Contacts} from './contacts';
import {NoMatch} from './noMatch';

const root=createRoot(document.querySelector('#root'));
root.render(
    <BrowserRouter>        
        <Routes>
            <Route path='/' element={<Layout/>}>
                <Route index element={<Home/>}/>
                <Route path='about' element={<About/>}/>
                <Route path='contacts' element={<Contacts/>}/>
                <Route path='*' element={<NoMatch/>}/>
            </Route>
        </Routes>
    </BrowserRouter>
)

and my json file:

  "name": "basic-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "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"
    ]
  }
}

Answer 1

To Resolve this error. Actually this is due to the version mismatch.React upgrade to Version 18, you created app with React 18 version which expect you to render in that way.But your react-testing-library packages are not latest. You can use the below commands.

The latest versions of React Testing library packages "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^14.2.1",

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

Run the above commands in the source directory.It worked for me. Thanks and have a great day.