前提
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}
回答1件
あなたの回答
tips
プレビュー