Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

313
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda