Next.js 13添加'use client'标签报错，求解决方法

首次使用Next.js 13构建简单应用，常规功能运行正常，但在组件开头添加'use client'标签后，执行npm run dev时应用崩溃，抛出错误：SyntaxError: "undefined" is not valid JSON。切换至--turbo模式运行则无异常，疑似Windows系统环境导致的兼容性问题。

相关代码如下：

page.js #

import { Inter } from "next/font/google";
import styles from "./page.module.css";

import Nav from "./components/Nav";

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

export default function Home() {
  return (
    <main className={styles.main}>
      test page
      <Nav />
    </main>
  );
}

Nav.jsx #

'use client';
export default function Nav() {
  return <h1>hii</h1>;
}

• 清理项目与npm缓存：删除项目根目录下的.next文件夹，同时清理npm缓存，执行命令：

  rmdir /s .next
  npm cache clean --force
  

  完成后重新运行npm run dev。

• 检查并升级Node.js版本：确保使用的Node.js版本符合Next.js 13要求（推荐18.x或20.x LTS版本）。执行node -v查看当前版本，若版本过低，升级至对应LTS版本后重试。

• 临时关闭Windows Defender实时保护：部分Windows环境下，实时保护可能干扰Next.js的文件编译流程。临时关闭后重启开发服务，若问题解决，可将项目目录添加至Defender的排除列表，避免后续再次触发。

• 修改Next.js配置禁用文件系统缓存：在项目根目录的next.config.js中添加如下配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    experimental: {
      appDir: true,
      fileSystemCache: false,
    },
  };
  
  module.exports = nextConfig;
  

  保存后重启开发服务。

• 切换至WSL2环境运行项目：若上述方法均无效，可尝试在Windows Subsystem for Linux 2（WSL2）环境下搭建项目并运行，规避Windows文件系统的兼容性问题。

内容的提问来源于stack exchange，提问作者zouzou b lebiane