admin管理员组

文章数量:1356778

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.

  • javascript
  • html
  • reactjs
  • next.js
Share Improve this question asked Mar 24, 2020 at 11:51 theairbend3rtheairbend3r 7993 gold badges10 silver badges30 bronze badges 2
  • Inside your _document.js you must have div i.e. <body> <Main /> <NextScript /> </body> so the Main can'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.js file. I created this app using npm init next-app. I do have an _app.js file which I had to create to use tailwindcss. – theairbend3r Commented Mar 24, 2020 at 12:04
Add a ment  | 

2 Answers 2

Reset to default 3

Your 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:

本文标签： javascriptWarning Expected server HTML to contain a matching ltbodygt in ltdivgtStack Overflow

版权声明：本文标题：javascript - Warning: Expected server HTML to contain a matching &lt;body&gt; in &lt;div&gt; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744062148a2584320.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。