Next js, ReactDom.render is no longer supported

Question

I just spun up a new Next JS app with Next 12.

I am getting this error on all page loads in the browser:

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

Next js's ReactDom.render is under the hood, how can I resolve this error?

Answer 1

You may also get this warning if you've updated to React 18 and are using a custom server setup in your Next.js app.

For this case, the issue has been addressed in this PR in version 12.1.7-canary.2 . To fix it in your project simply update Next.js to version >=12.2.0.

npm install next@latest

Answer 2

For me it was indeed Chakra. You need to Install the latest Chakra ui for NextJS

npm i @chakra-ui/react@2.0.0-next.3

Answer 3

actually i have got same problem/warning ,

and in my case i am using "react-toastify" inside my next.js application with context api, and after a lot of searching ...

i found the problem coming from :

toast.configure() method

and i am use it inside my context api module , and also i found the official "react-toastify" Docs talking about some problems related with this method when use it with context api , and they are removed this method from the new version .

and here is the link for official docs:

https://fkhadra.github.io/react-toastify/migration-v9#toastconfigure-removal

finally i solved my problem by using the following steps :

1-remove toast.configure() from my context api module .

2- instead of using toast.configure() , i used "ToastContainer" component inside "_app" module "just define it , the toast will works fine" as expected , and here is my "_app.js module " :

import { useEffect } from 'react';
import '../styles/globals.css'
import 'bootstrap/dist/css/bootstrap.css';
import Nav from '../components/nav';
import Footer from '../components/footer'; 
import { AuthProvider } from '../my_utils/myContext/authcontext';



import { ToastContainer } from 'react-toastify';


function MyApp({ Component, pageProps }) {

    useEffect(() => {
        import ('bootstrap/dist/js/bootstrap.js')
        import ('react-toastify/dist/ReactToastify.css')
    }, []);


    return (
    <> 
    <AuthProvider> 
        <Nav />
        <div className="allButFooter ms-3 me-3"> 
            <Component {...pageProps} />
            <ToastContainer />

        </div>
        <Footer />
    </AuthProvider>
    </>
    )
}
export default MyApp

i don't know if your case same my case , but i hope that helpful for you .

Answer 4

只需运行该命令即可获得最新的反应版本

npx create-next-app@latest