根据我对beta文档的理解，我需要在我的客户端组件顶部使用"use client"来定义为一个，并且我可以在 * 服务器组件 ， 叶子 * 或 * 布局 * 中使用它。
所以，这是我的代码。

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（Leaf）

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>
  )
}

但我得到了这个错误：
未处理的运行时错误
语法错误：“undefined”不是有效的JSON
调用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）
进展
node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-client.browser.development.js（1476：0）
即使我直接把 client component 放在<main>的leaf中，也会出现同样的错误。我不明白发生了什么，因为我是按照文档操作的。有人能帮忙吗？

**EDIT：**仅当客户端组件添加到代码的任何位置时才会发生此情况。
**编辑2：**看看我在GitHub上做的这个repo，它包含一个几乎相同的代码导致相同问题的项目https://github.com/Benevos/nextjs-error