为何添加"use client"后Next.js仍抛出事件处理器传递错误？

我用打包工具生成了一个简单的React组件（打包后代码如下），尽管组件顶部已经添加了"use client"指令，Next.js还是抛出错误：

Error: Event handlers cannot be passed to Client Component props. {onClick: function, children: "Boop"}

打包后组件代码 #

"use client";
"use strict";var a=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty;var m=(t,o)=>{for(var n in o)r(t,n,{get:o[n],enumerable:!0})},c=(t,o,n,u)=>{if(o&&typeof o=="object"||typeof o=="function")for(let e of i(o))!s.call(t,e)&&e!==n&&r(t,e,{get:()=>o[e],enumerable:!(u=b(o,e))||u.enumerable});return t};var B=(t,o,n)=>(n=t!=null?a(l(t)):{},c(o||!t||!t.__esModule?r(n,"default",{value:t,enumerable:!0}):n,t)),f=t=>c(r({}, "__esModule",{value:!0}),t);var x={};m(x,{Button:()=>k});module.exports=f(x);var p=B(require("react")),k=()=>p.createElement("button",{onClick:()=>alert("boop")},"Boop");0&&(module.exports={Button});
//# sourceMappingURL=Button.js.map

原始组件代码 #

"use client";

import * as React from "react";

export const Button = () => {
  return <button onClick={() => alert("boop")}>Boop</button>;
};

• 调整打包工具输出为ES模块
  当前打包代码使用CommonJS格式导出（module.exports），Next.js对客户端组件的ES模块支持更可靠。修改打包工具配置（如Rollup、Webpack、Vite），设置输出格式为ES模块（例如output.format: 'esm'），让组件以export/import方式导出，确保Next.js能正确识别"use client"的作用。

• 确认"use client"的位置有效性
  确保"use client"是文件的第一行，无任何前置内容。虽然原始代码和打包后代码都满足这点，但CommonJS的导出结构可能干扰Next.js的编译逻辑，切换到ES模块导出能解决这个识别问题。

• 确保组件在客户端环境中使用
  不要在服务端组件中直接导入并渲染该Button组件。服务端组件无法处理客户端组件的内部事件处理器，会将其识别为非法props。必须在带有"use client"指令的组件中导入和使用这个Button。

• 优化打包工具的代码转换逻辑
  部分打包工具的激进优化（如代码重排、IIFE包装）可能让Next.js无法正确识别客户端组件标识。尝试禁用不必要的代码压缩或重排选项，保留"use client"的原始位置以及组件的直接导出结构，避免组件定义被嵌套在复杂的包装函数中。

内容的提问来源于stack exchange，提问作者Mayank Kumar Chaudhari