我的bundler创建了一个简单的React组件,如下所示
"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”,但Next.js仍会抛出错误Error: Event handlers cannot be passed to Client Component props. {onClick: function, children: "Boop"}
注解中要求的组件实际代码
"use client";
import * as React from "react";
export const Button = () => {
return <button onClick={() => alert("boop")}>Boop</button>;
};
型
1条答案
按热度按时间yhuiod9q1#
我试图通过手动复制你的组件代码到
node_modules
文件夹中的一个虚拟包中来模拟这个错误。我注意到,当我在导入和导出这个组件的index.js文件上添加"use client"
时,它工作得很好。我不知道为什么会这样,但它很好地解决了这个问题。你们的出口商品是这样的吗
字符串
仅在导入
import {Button} from "your-package/Button"
时有效