Next.js 13.4.19中'use-client'指令失效问题求助

问题描述 #

在Next.js 13.4.19版本中，已添加'use-client'指令的组件仍触发报错：

- error Error: Event handlers cannot be passed to Client Component props. <button onClick={function} type=... children=...>

已尝试更新Node.js至v20.6.1、切换Next.js Canary版本，问题未得到解决。

项目代码 #

src/app/layout.tsx #

import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import '../styles/globals.css';

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

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

src/app/page.tsx #

import Button from '@/components/Button';

const Home: () => JSX.Element = () => {
  return <Button />;
};

export default Home;

src/components/Button/index.tsx #

'use-client';

const Button = (): JSX.Element => {
  return (
    <button
      onClick={() => {
        console.log('hello');
      }}
      type="button"
    >
      hello
    </button>
  );
};

export default Button;

package.json #

{
  "name": "someName",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.19",
    "@storybook/addon-essentials": "^7.4.1",
    "@storybook/addon-interactions": "^7.4.1",
    "@storybook/addon-links": "^7.4.1",
    "@storybook/blocks": "^7.4.1",
    "@storybook/nextjs": "^7.4.1",
    "@storybook/react": "^7.4.1",
    "@storybook/testing-library": "^0.2.0",
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "@vercel/style-guide": "^5.0.1",
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-storybook": "^0.6.13",
    "postcss": "8.4.29",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "storybook": "^7.4.1",
    "typescript": "5.2.2"
  }
}

排查与解决方向 #

1. 确认'use-client'指令位置
   确保'use-client'是文件第一行，无前置注释、空行或隐藏字符（如BOM），避免Next.js无法识别指令。

2. 清理缓存重启服务
   执行以下命令清除缓存并重新安装依赖：

   rm -rf .next node_modules
   npm install
   npm run dev
   

   缓存残留可能导致旧编译结果干扰客户端组件识别。

3. 检查TypeScript配置
   确认tsconfig.json中compilerOptions.jsx设为'preserve'或'react-jsx'，这是Next.js 13+ App Router正确处理客户端组件的必要配置。

4. 排查Storybook兼容性
   项目中安装的@storybook/nextjs可能与Next.js App Router存在冲突，可临时移除Storybook相关依赖后重启项目验证。若问题解决，尝试升级Storybook至最新稳定版本。

5. 确认文件扩展名
   客户端组件需使用.tsx或.jsx扩展名，避免Next.js无法正确解析JSX与客户端指令。

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