Acabo de crear una nueva aplicación Next JS con Next 12.
Recibo este error en todas las cargas de página en el navegador:
Advertencia: ReactDOM.render ya no es compatible con React 18. Utilice createRoot en su lugar. Hasta que cambie a la nueva API, su aplicación se comportará como si estuviera ejecutando React 17. Obtenga más información: https://reactjs.org/link/switch-to-createroot
El ReactDom.render de Next js está bajo el capó, ¿cómo puedo resolver este error?
Para mí fue de hecho Chakra. Necesita instalar la última interfaz de usuario de Chakra para NextJS
npm i @chakra-ui/react@2.0.0-next.3También puede recibir esta advertencia si ha actualizado a React 18 y está utilizando una configuración de servidor personalizada en su aplicación Next.js.
Para este caso, el problema se ha abordado en este PR en la versión 12.1.7-canary.2 . Para solucionarlo en su proyecto, simplemente actualice Next.js a la versión >=12.2.0.
npm install next@latesten realidad tengo el mismo problema/advertencia,
y en mi caso estoy usando "react-toastify" dentro de mi aplicación next.js con api de contexto, y después de mucha búsqueda...
Encontré que el problema venía de:
toast.configure() methody lo uso dentro de mi módulo context api, y también encontré los documentos oficiales "react-toastify" que hablan de algunos problemas relacionados con este método cuando se usa con context api, y se eliminaron este método de la nueva versión.
y aquí está el enlace para documentos oficiales:
https://fkhadra.github.io/react-toastify/migration-v9#toastconfigure-removal
finalmente resolví mi problema siguiendo los siguientes pasos:
1-quitar toast.configure() de mi módulo api de contexto.
2- en lugar de usar toast.configure() , usé el componente "ToastContainer" dentro del módulo "_app" "simplemente defínalo, el brindis funcionará bien" como se esperaba, y aquí está mi "módulo _app.js":
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 MyAppNo sé si tu caso es el mismo que el mío, pero espero que te sea útil.