Estoy usando la biblioteca next-auth para mi proyecto Next.js. Cada vez que ejecuto npx next dev y compruebo la Consola, encuentro esto:
Warning: validateDOMNesting(...): <html> cannot appear as a child of <div>. html Home SessionProvider@webpack-internal:///./node_modules/next-auth/react/index.js:417:18 Everything@webpack-internal:///./pages/_app.tsx:70:21 ErrorBoundary@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638 ReactDevOverlay@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23177 Container@webpack-internal:///./node_modules/next/dist/client/index.js:323:24 AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:822:20 Root@webpack-internal:///./node_modules/next/dist/client/index.js:946:21 ¿Alguien sabe cómo arreglar esto? Estoy bastante seguro de que tiene que ver con Next-Auth porque se trata del componente SessionProvider .
Si alguien lo necesita, aquí está mi archivo pages/_app.tsx :
import "../public/styles.css" import type { AppProps } from "next/app" import { SessionProvider } from "next-auth/react" export default function Everything({ Component, pageProps: { session, ...pageProps } }: AppProps) { return ( <SessionProvider session={session}> <Component {...pageProps} /> </SessionProvider> ) } ACTUALIZACIÓN : Me las arreglé para arreglar esto yo mismo. La solución es simplemente reemplazar <html> y <body> en los archivos de su página con el fragmento JSX.
Ejemplo:
import Head from "next/head" export default function MyPage() { <html> <Head> <title>hi</title> </Head> <body> <p>Hello</p> </body> </html> }se convierte en:
import Head from "next/head" export default function MyPage() { <> <Head> <title>hi</title> </Head> <> <p>Hello</p> </> </> }¡y funciona!