NextJS 13.3.0实验特性：客户端组件无法正常工作求助

问题详情 #

按Beta文档要求在客户端组件顶部加了"use client"标记，不管是在服务端组件里引入它，还是直接放到页面组件里，都会触发JSON解析错误，只有不引入客户端组件时一切正常。

代码示例 #

ClientComponent.js #

"use client";

export default function ClientComponent() {
  return (
    <div>
        <h1>This is a client component!</h1>
    </div>
  )
}

ServerComponent.js #

import ClientComponent from "./ClientComponent"

export default function ServerComponent() 
{
    return (
        <div>
            <h1>This is a server component!</h1>
            <ClientComponent/>
        </div>
    )
}

Page.js（页面组件） #

import { Inter } from 'next/font/google'
import ServerComponent from './ServerComponent';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <main styles={inter.className}>
      <ServerComponent/>
    </main>
  )
}

报错信息 #

Unhandled Runtime Error
SyntaxError: "undefined" is not valid JSON
Call Stack JSON.parse
React
parseModel
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js
(33:0)
resolveModule
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js
(749:0)
processFullRow
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js
(825:0)
processBinaryChunk
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js
(869:0)
progress
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js
(1476:0)

解决办法 #

1. 修复Page.js里的属性错误 #

你在Page.js的<main>标签里用了styles属性，这是错误用法，应该改成className，这个小错误可能引发渲染异常：

// 错误写法
<main styles={inter.className}>
// 正确写法
<main className={inter.className}>

2. 升级Next.js到最新稳定版 #

这类错误大多出现在App Router的早期Beta版本中，升级到最新稳定版大概率能解决问题：

npm install next@latest
# 使用yarn的话执行
yarn add next@latest

3. 清除缓存重启服务 #

Next.js的开发缓存有时会导致奇怪的异常，按以下步骤操作：

• 删除项目根目录下的.next文件夹
• 执行npm cache clean --force清除npm缓存
• 重启开发服务器npm run dev

4. 检查组件导入导出和"use client"位置 #

确保客户端组件的"use client"标记在文件最顶部，前面不能有任何代码、注释甚至空行；同时检查所有组件的导入路径是否存在拼写错误，导出格式是否规范。

内容的提问来源于stack exchange，提问作者Benevos