Next.js 13.3.0中React组件报JSON.parse语法错误求助

报错信息 #

Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse()

相关代码 #

"use client";

import { useState } from "react";

interface Props {
  handleClick: () => void;
  name: string;
}

const Button = ({ handleClick, name }: Props) => {
  console.log(`${name} renderizado`);
  return <button onClick={handleClick}>{name}</button>;
};

export default function Home() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  return (
    <>
      <Button
        handleClick={() => setCountOne((prev) => prev + 1)}
        name="button1"
      />
      <Button
        handleClick={() => setCountTwo((prev) => prev + 1)}
        name="button2"
      />
    </>
  );
}

调用栈截图 #

问题排查与解决 #

你提供的组件代码本身无语法或逻辑错误，这个JSON解析异常并非来自组件代码，大概率是Next.js 13.3.0版本在客户端组件水合、缓存机制或开发环境中的已知问题导致。可尝试以下方案：

• 清除缓存重启服务：执行npm run dev -- --clear-cache（yarn/pnpm用户替换对应命令），彻底清除Next.js缓存后重启开发服务器，多数开发环境异常可通过此方式解决。
• 升级Next.js版本：13.3.0存在部分客户端组件相关bug，升级至13.3.x后续小版本（如13.3.4及以上）可修复这类水合过程中的JSON解析问题。
• 检查路由与组件配置：确认Home组件所在路由符合App Router规则，且未出现Server与Client组件的不当混用（你的组件已添加"use client"标注，此部分无需调整，仅做二次确认）。
• 排查第三方依赖/全局配置：如果项目有自定义next.config.js配置或第三方插件，可暂时移除非必要项，排查是否是外部因素干扰构建流程。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas