Next.js 13中'use client'指令引发JSON解析错误求助

1. 定位JSON解析的触发点 #

这个错误本质是代码尝试解析undefined为JSON（"Unexpected token u"对应undefined的首字母），先排查以下场景：

• 检查组件或父组件中的JSON.parse()调用，确认传入参数不是undefined、空字符串或非JSON格式内容。比如原本Server组件从服务端获取的props，改成Client组件后数据传递逻辑变化导致缺失。
• 查看是否有从localStorage/sessionStorage读取数据的代码，首次渲染时存储值可能不存在，直接解析会触发报错。

2. 确认'use client'指令的正确性 #

'use client'必须是组件文件的第一行有效代码，前面不能有注释、空行或导入语句，示例正确写法：

'use client';
import { useState } from 'react';

export default function SimpleComponent() {
  const [count, setCount] = useState(0);
  // 组件逻辑
}

指令位置错误会导致Client组件标识失效，引发异常。

3. 对齐本地与CodeSandbox的依赖版本 #

CodeSandbox的环境可能和本地存在版本差异：

• 对比本地package.json中的next版本与CodeSandbox使用的版本，尝试升级或降级至一致。
• 执行npm install重新安装依赖，清理缓存后重启开发服务器：

npm cache clean --force
npm run dev

4. 清理Server组件残留的服务端逻辑 #

原本的Server组件可能包含仅能在服务端运行的代码，改成Client组件后在客户端执行会出错：

• 检查组件中是否调用了fs、path等Node.js内置模块，Client组件不支持这些模块。
• 确认API调用是否有错误处理，比如请求失败时返回非JSON格式数据，会导致解析报错。

5. 启用严格模式辅助调试 #

在next.config.js中开启React严格模式，暴露更多潜在问题：

module.exports = {
  reactStrictMode: true,
  experimental: { appDir: true }
};

同时在组件中添加console.log，打印所有待解析的JSON数据，确认是否为无效格式或undefined。

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