I'm using the next-auth library for my Next.js project. Every time I run npx next dev and check the Console, I find this:
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
Does anyone know how to fix this? I'm pretty sure it has to do with Next-Auth because it's talking about the SessionProvider component.
If anyone needs it, here's my pages/_app.tsx file:
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>
)
}
UPDATE:
I managed to fix this myself. The solution is to simply replace <html> and <body> in your page files with the JSX fragment.
Example:
import Head from "next/head"
export default function MyPage() {
<html>
<Head>
<title>hi</title>
</Head>
<body>
<p>Hello</p>
</body>
</html>
}
becomes:
import Head from "next/head"
export default function MyPage() {
<>
<Head>
<title>hi</title>
</Head>
<>
<p>Hello</p>
</>
</>
}
and it works!