Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

316
Views
Next js, ReactDom.render is no longer supported

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?

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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
about 4 years ago · Juan Pablo Isaza Report

0

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
about 4 years ago · Juan Pablo Isaza Report

0

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 .

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!