React ハイドレーションエラーが解決できない

前提

next.jsを試しているのですがコンソールのエラーメッセージが解決できません。

実現したいこと

コンソールにでているエラーをなくしたい。

発生している問題・エラーメッセージ

Warning: Did not expect server HTML to contain a <script> in <header>.
    at header
    at body
    at html
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:53:9)
    at HotReload (webpack-internal:///./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:19:11)
    at Router (webpack-internal:///./node_modules/next/dist/client/components/app-router.js:73:11)
    at ErrorBoundaryHandler (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:28:9)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/client/components/error-boundary.js:40:11)
    at AppRouter
    at ServerRoot (webpack-internal:///./node_modules/next/dist/client/app-index.js:114:11)
    at RSCComponent
    at Root (webpack-internal:///./node_modules/next/dist/client/app-index.js:130:11)

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (react-dom.development.js?160d:14643:1)
    at popHydrationState (react-dom.development.js?160d:14844:1)
    at completeWork (react-dom.development.js?160d:25200:1)
    at completeUnitOfWork (react-dom.development.js?160d:30674:1)
    at performUnitOfWork (react-dom.development.js?160d:30560:1)
    at workLoopConcurrent (react-dom.development.js?160d:30535:1)
    at renderRootConcurrent (react-dom.development.js?160d:30474:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?160d:29662:1)
    at workLoop (index.js?82e4:10:3922)
    at flushWork (index.js?82e4:10:3630)

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
    at updateHostRoot (react-dom.development.js?160d:22659:1)
    at beginWork (react-dom.development.js?160d:24521:1)
    at beginWork$1 (react-dom.development.js?160d:31617:1)
    at performUnitOfWork (react-dom.development.js?160d:30549:1)
    at workLoopSync (react-dom.development.js?160d:30434:1)
    at renderRootSync (react-dom.development.js?160d:30387:1)
    at recoverFromConcurrentError (react-dom.development.js?160d:29776:1)
    at performConcurrentWorkOnRoot (react-dom.development.js?160d:29675:1)
    at workLoop (index.js?82e4:10:3922)
    at flushWork (index.js?82e4:10:3630)

該当のソースコード

app/layout.tsx
1import '~/styles/globals.scss'
2import Header from '~/components/header'
3import Footer from '~/components/footer'
4
5export default function RootLayout({ children }: { children: React.ReactNode }) {
6  return (
7    <html lang='ja'>
8      <body>
9        <div>
10          <Header />
11          <div>
12            {children}
13            <Footer />
14          </div>
15        </div>
16      </body>
17    </html>
18  )
19}

components/header.tsx
1export default function AppHeader({}) {
2  return (
3    <header>
4      <h1>ロゴなど</h1>
5      <nav>
6        <ul>
7          <li>リスト01</li>
8          <li>リスト02</li>
9          <li>リスト03</li>
10        </ul>
11      </nav>
12    </header>
13  )
14}

components/footer.tsx
1export default function Footer({}) {
2  return (
3    <footer>
4      <div>fotter</div>
5    </footer>
6  )
7}
8

試したこと

レイアウトから<Header/>を削除するとエラーメッセージが消えるのでHeaderコンポーネントが原因だということは分かった。
Headerの<header></header>タグを<div></div>などに変えるとエラーメッセージが消えた。
Headerコンポーネントの中身を下記のように変更してもダメだった。

components/header.tsx
1export default function AppHeader({}) {
2  return (
3    <header><h1>ロゴなど</h1></header>
4  )
5}

補足情報（FW/ツールのバージョンなど）

next.config.js
1/** @type {import('next').NextConfig} */
2const path = require('path');
3const TerserPlugin = require("terser-webpack-plugin");
4
5const nextConfig = {
6  webpack: (config, options) => {
7    config.optimization.minimize = true;
8    config.optimization.minimizer = [
9      new TerserPlugin({
10        terserOptions: {
11          compress: { drop_console: true }
12        },
13        extractComments: "all"
14      })
15    ];
16    return config;
17  },
18  reactStrictMode: true,
19  swcMinify: true,
20  sassOptions: {
21    includePaths: [
22      path.join(__dirname, 'styles'),
23    ],
24  },
25  experimental: {
26    appDir: true,
27    fontLoaders: [
28      { 
29        loader: '@next/font/google',
30        options: { 
31          subsets: [
32            'M PLUS 1p',
33          ]
34        } 
35      },
36    ],
37  }
38}
39
40module.exports = nextConfig

package.json
1{
2  "name": "next_app",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev",
7    "build": "next build",
8    "start": "next start",
9    "lint": "next lint"
10  },
11  "dependencies": {
12    "@next/font": "^13.0.1",
13    "next": "13.0.0",
14    "react": "18.2.0",
15    "react-dom": "18.2.0"
16  },
17  "devDependencies": {
18    "@types/node": "18.11.7",
19    "@types/react": "18.0.24",
20    "@types/react-dom": "18.0.8",
21    "eslint": "8.26.0",
22    "eslint-config-next": "13.0.0",
23    "image-minimizer-webpack-plugin": "^3.8.0",
24    "imagemin-webp-webpack-plugin": "^3.3.6",
25    "normalize.css": "^8.0.1",
26    "prettier": "^2.7.1",
27    "sass": "^1.55.0",
28    "terser-webpack-plugin": "^5.3.6",
29    "typescript": "4.8.4"
30  }
31}

hoshi-takanori

2022/11/09 05:48

Header の「ロゴなど」の中に script タグがあったりしますか？

bigbox267

2022/11/09 05:59

ご質問ありがとうございました。 Headerのコードは記載したもので全てです。下記の記載で自己解決できました。ありがとうございます。

行動規範の内容に同意します

回答1件

自己解決

layout.tsxを下記に修正したところエラーがでなくなった。

<body>タグを削除

app/layout.tsx
1import '~/styles/globals.scss'
2import Header from '~/components/header'
3import Footer from '~/components/footer'
4
5export default function RootLayout({ children }: { children: React.ReactNode }) {
6  return (
7    <html lang='ja' className={inter.className}>
8      <div>
9        <Header />
10        <div>
11          {children}
12          <Footer />
13        </div>
14      </div>
15    </html>
16  )
17}