Next.js 13.3.0创建客户端组件时触发未处理运行时异常求助

问题场景 #

在Next.js 13.3.0（开启experimental appDir）中，将components目录下的Test组件取消注释首行的'use client';后，页面加载失败，抛出异常：SyntaxError: "undefined" is not valid JSON，注释该行则组件正常运行。

组件代码：

// 'use client';

export default function Test() {
    return (
        <div>
            Testing 1, 2, 3!
        </div>
    )
}

Next.js配置：

const nextConfig = {
  experimental: {
    appDir: true,
  },
}

解决思路 #

• 检查父组件传递的props
  客户端组件会对父组件传递的props做JSON序列化，如果父组件（尤其是服务器组件）传递了undefined、函数、Symbol这类无法序列化的值，哪怕当前Test组件没有使用props，也会触发解析错误。仔细检查引用Test组件的地方是否传了无效值。

• 清理缓存并重启开发服务
  执行rm -rf .next删除Next.js的开发缓存目录，然后重启npm run dev。早期appDir版本的缓存机制容易出现异常，清理后大概率能解决这类奇怪的序列化问题。

• 排查额外配置干扰
  如果next.config.js中有第三方插件、自定义webpack配置等非必要内容，暂时注释掉这些配置，测试是否还会报错。部分插件可能会干扰客户端组件的序列化逻辑。

• 检查文件编码与语法
  确认组件文件没有隐藏的特殊字符（比如全角空格、不可见控制字符），这类字符可能导致解析异常。可以将代码复制到纯文本编辑器后重新粘贴回组件文件。

• 升级Next.js版本
  13.3.0是appDir刚推出的早期版本，存在不少已知bug。升级到同大版本的稳定版（如13.3.4）或更高版本，官方可能已经修复了该序列化相关的问题。

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