为什么我会收到“Uncaught SyntaxError”，导致 next.js 中出现 ChunkLoadError 和 Hydration 错误？

Question

你好，我有一个刚刚启动的 next.js 项目。当我在 Chrome 上运行

npm run dev

时，我在 Chrome 控制台中收到以下错误：

layout.js:160 Uncaught 
SyntaxError: Invalid or unexpected token (at layout.js:160:29)

此外，我的一个 onClick 事件和所有链接组件都停止工作。大约一分钟后，页面崩溃并发出

Unhandled Runtime Error

的声音，控制台打印出更多错误。这些错误是几个

Uncaught ChunkLoadError

以及以下内容：

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

当我启动开发服务器时，大约五分之三会发生该错误。节点终端中没有错误，仅在浏览器中出现错误。

有谁知道这个问题的原因是什么，以及我是否需要在继续我的项目之前修复它？关于如何解决我的问题有什么建议吗？

到目前为止我的代码（没有注释的组件）：

布局.tsx

import type { Metadata } from 'next'
import { Montserrat } from 'next/font/google'
import './globals.css'
import Navbar from '@/components/Navbar/Navbar'
import Footer from '@/components/Footer/Footer'

// const montserrat = Montserrat({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang='en'>
      <body>
        <Navbar />
        {children}
        <Footer />
      </body>
    </html>
  )
}

导航栏.tsx

import Link from 'next/link'
import Menu from '@/components/Menu/Menu'

const Navbar = () => {
  return (
    <div className='h-20 pt-1 px-4 md:px-8 lg:px-16 xl:px-32 2xl:px-64 relative'>
      <div className='flex justify-between items-center'>
        <Link href='/'>TRAVEL PLANNER</Link>
        {/* <Menu /> */}
      </div>
    </div>
  )
}

export default Navbar

页脚.tsx

const Footer = () => {
  return (
    <div>
      <a href='https://www.flaticon.com/free-icons/hiking' title='hiking icons'>
        Hiking icons created by Freepik - Flaticon
      </a>
      <a
        href='https://www.flaticon.com/free-icons/camping'
        title='camping icons'
      >
        Camping icons created by Freepik - Flaticon
      </a>
      <a
        href='https://www.flaticon.com/free-icons/up-and-down'
        title='up and down icons'
      >
        Up and down icons created by Freepik - Flaticon
      </a>
    </div>
  )
}

export default Footer

依赖关系：

{
  "name": "travel-planner-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "dependencies": {
    "next": "^14.2.8",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@testing-library/user-event": "^14.5.2",
    "@types/jest": "^29.5.12",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-jest-dom": "^5.1.0",
    "eslint-plugin-testing-library": "^6.2.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "postcss": "^8",
    "prettier": "3.3.3",
    "tailwindcss": "^3.3.0",
    "ts-jest": "^29.1.2",
    "ts-node": "^10.9.2",
    "typescript": "^5"
  }
}

如果我需要澄清任何事情或者我对某些事情有误解，请告诉我。我对 Next.js 14 和服务器组件还很陌生。

我尝试解决但没有成功：

我检查了我的代码以确保没有任何语法错误，尽管我可能错过了一些东西。

我尝试通过查看 Chrome 开发工具的“网络”选项卡和“元素”选项卡中的 html，将服务器端的 html 与客户端的 html 进行比较。我看不出 html 正文有任何区别。

我尝试删除

.next

文件夹并清除我的节点模块以重新启动，这暂时有效，但在几次启动后又返回了错误。我还尝试清除 Chrome 上的缓存。

最后，我尝试通过注释掉元素和组件来缩小错误的根源（因为从刚开始我就很少有）。似乎只有当我有任何 Link 组件或我的 onClick 事件存在时才会出现该错误。不注释其中任何一个都会产生错误。我查看了 next.js 网站上 Link 组件的文档，但我找不到我做错的事情。锚标记不会产生错误。

我还检查了以下 stackoverflow 问题和 Next.js 文档，但无法通过它们找到永久解决方案或解释（或者解决方案可能在文档中，但我不明白：

https://nextjs.org/docs/messages/react-Hydration-error

https://stackoverflow.com/questions/77788615/next-js-uncaught-syntaxerror-invalid-or-unexpected-token-then-chunkloaderror

Answer 1

您忘记在导航栏中用主 div 包围 {children}。这是正确的代码：

<main>{children}</main>

。将其添加到您的layout.js中，我相信它会起作用。

为什么我会收到“Uncaught SyntaxError”，导致 next.js 中出现 ChunkLoadError 和 Hydration 错误？

问题描述投票：0回答：1

1个回答

最新问题

为什么我会收到“Uncaught SyntaxError”，导致 next.js 中出现 ChunkLoadError 和 Hydration 错误？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1