Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

311
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda