Error message:
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
ReactDOM.React 18 no longer supports rendering. Use createRoot instead. Before you switch to the new API, your application will behave as if it is running React 17
Reason:
React team has launched the latest version of 18.0, in which React 18 no longer supports ReactDOM.render
Console error:
Solution:
Use createRoot in the index.js file
import React from 'react'
import ReactDOM from 'react-dom'
import TopList from './TopList'
// Use createRoot
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<TopList/>)
// report error
// ReactDOM.render( < TopList /> , document.getElementById('root'))
Read More:
- [Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.
- [Solved] React Invariant Violation: Minified React error #130
- [Solved] React Dependency Error: Invalid tag name “^np.0.2“ of package “react@^np.0.2“: Tags may not have an
- React Error: history is undefined [How to Solve]
- [Solved] vite2+vue3 jsx Error: React is not defined
- [Solved] Error:The above error occurred in one of your React components & A component suspended while respondi
- How to Solve React devtools plug-in Error
- React: How to Solve Web3 import error
- [Solved] React Startup Error at the First time :SyntaxError: Unexpected token
- [Solved] react-quill failed to install error: Could not resolve dependency
- React error boundary (What You Should Know & How to Solve)
- React project is packaged and set as required Error [How to Solve]
- [Solved] React Click the Event to Modify the State Value Error
- [Solved] react-router-dom Error: <NavLink>activeClassName
- Anti card limited Drag Based on react draggable drag
- [Solved] Failed to load config “react-app“ to extend from.
- How to React page to achieve entry and exit animation
- [Solved] vue Project Error: react lazy eslint error Parsing error: Unexpected token import
- React native android: How to Upload Formdata
- [Solved] react Chrome Browser Error: Uncaught TypeError: Cannot read properties of undefined (reading ‘forEach‘)