I get the above mentioned warning in the console. I don't understand why. I have two matching <body> tags in index.js file. The plete warning is -
Warning: Expected server HTML to contain a matching <body> in <div>.
in body (at pages/index.js:12)
in div (at pages/index.js:11)
in div (at pages/index.js:7)
in Index (at _app.js:8)
in MyApp
in Container (created by AppContainer)
in AppContainer
Following the index.js file I'm using. I'm using Next.js with tailwindcss.
import Head from "next/head"
import SideNavbar from "../ponents/SideNavbar"
import MainPage from "../ponents/MainPage"
const Index = () => {
return (
<div className="mx-auto">
<Head>
<title>Manchester United</title>
</Head>
<body className="min-h-screen">
<div className="flex flex-row">
<SideNavbar />
<MainPage>
<div className="text-center px-2 py-6 text-5xl font-bold text-gray-200">
Manchester United
</div>
</MainPage>
</div>
</body>
</div>
)
}
export default Index
The warning goes away if I replace the <body> tag with a <div> tag. The two custom ponents I use, <SideNavbar /> and <MainPage />, don't use any <body> tags.
I get the above mentioned warning in the console. I don't understand why. I have two matching <body> tags in index.js file. The plete warning is -
Warning: Expected server HTML to contain a matching <body> in <div>.
in body (at pages/index.js:12)
in div (at pages/index.js:11)
in div (at pages/index.js:7)
in Index (at _app.js:8)
in MyApp
in Container (created by AppContainer)
in AppContainer
Following the index.js file I'm using. I'm using Next.js with tailwindcss.
import Head from "next/head"
import SideNavbar from "../ponents/SideNavbar"
import MainPage from "../ponents/MainPage"
const Index = () => {
return (
<div className="mx-auto">
<Head>
<title>Manchester United</title>
</Head>
<body className="min-h-screen">
<div className="flex flex-row">
<SideNavbar />
<MainPage>
<div className="text-center px-2 py-6 text-5xl font-bold text-gray-200">
Manchester United
</div>
</MainPage>
</div>
</body>
</div>
)
}
export default Index
The warning goes away if I replace the <body> tag with a <div> tag. The two custom ponents I use, <SideNavbar /> and <MainPage />, don't use any <body> tags.
-
Inside your _document.js you must have div i.e.
<body> <Main /> <NextScript /> </body>so theMaincan't have another body tag via your _app.js – Jawad ul hassan Commented Mar 24, 2020 at 12:01 -
1
I don't have a
_document.jsfile. I created this app usingnpm init next-app. I do have an_app.jsfile which I had to create to use tailwindcss. – theairbend3r Commented Mar 24, 2020 at 12:04
2 Answers
Reset to default 3Your HTML isn't correct. You cannot have a body-Tag inside a div-Tag. A basic HTML-Structure looks like this
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div></div>
</body>
</html>
As React works, your React application is "injected" to HTML element which you define at ReactDOM.render:
ReactDOM.render(<App />, document.getElementById('root'));
But, this element is already a child of <body> element.
Warning:
validateDOMNesting(...):<body>cannot appear as a child of<div>.
Your error is just a variation of the same thing but as server-side rendering (Next.js) error.
By using Next.js, this HTML is hidden from you (check the HTML in the "vanilla" example in codesandbox attached).
Also, you can inspect the DOM tree at source tab in dev tools, there you will notice that two <body> elements exist.
Here is a small codesandbox code which demonstrates the error: