React组件库Button的onClick事件Rollup打包后失效求助

我正在用TypeScript开发React组件库，目前仅完成了Button组件开发。在库内部测试时，Button的onClick事件可正常触发，但通过Rollup打包并发布至GitHub npm仓库后，在其他项目中安装使用该组件库时，onClick事件完全失效。直接将Button组件代码复制到目标项目中使用，onClick事件则可正常工作，因此怀疑问题出在Rollup配置上。

我的Rollup配置代码 #

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";

import packageJson from "./package.json" assert { type: "json" };
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import postcss from "rollup-plugin-postcss";
import terser from "@rollup/plugin-terser";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      postcss({
        plugins: [],
      }),
      terser(),
    ],
  },
  {
    input: "dist/esm/types/index.d.ts",
    output: [{ file: "dist/index.d.ts", format: "esm" }],
    plugins: [dts()],
    external: [/\.css$/],
  },
];

Button组件代码 #

import React from "react";

export interface ButtonProps {
  /**
   * 按钮标签
   */
  variant?: "primary" | "secondary" | "danger" | "outline" | "ghost";
  /**
   * 是否禁用按钮
   */
  disabled?: boolean;
  /**
   * 是否圆角
   */
  rounded?: boolean;
  /**
   * 主题变体
   */
  theme?: "dark" | "light";
  /**
   * 子元素
   */
  children?: any;
  /**
   * 尺寸类型
   */
  size?: "small" | "normal" | "large" | "icon";
  /**
   * 点击事件
   */
  onClick?: () => void;
}

const Button = ({
  disabled = false,
  variant = "primary",
  rounded = true,
  theme = "dark",
  children,
  size = "normal",
  onClick = () => {},
}: ButtonProps) => {
  let variantStyle = "";
  switch (variant) {
    case "primary":
      if (theme === "dark") {
        variantStyle = "bg-slate-100 text-slate-900 hover:enabled:bg-slate-300";
      } else {
        variantStyle = "bg-slate-900 text-slate-200 hover:enabled:bg-slate-700";
      }
      break;
    case "secondary":
      if (theme === "dark") {
        variantStyle = "bg-slate-500 text-slate-100 hover:enabled:bg-slate-400";
      } else {
        variantStyle = "bg-slate-300 text-slate-900 hover:enabled:bg-slate-100";
      }
      break;
    case "danger":
      variantStyle = "bg-rose-600 text-slate-100 hover:enabled:bg-rose-400";
      break;
    case "outline":
      if (theme === "dark") {
        variantStyle =
          "border-2 border-slate-100 text-slate-100 hover:enabled:bg-slate-100 hover:enabled:text-slate-900";
      } else {
        variantStyle =
          "border-2 border-slate-900 text-slate-900 hover:enabled:bg-slate-900 hover:enabled:text-slate-100";
      }
      break;
    case "ghost":
      if (theme === "dark") {
        variantStyle =
          "text-slate-100 hover:enabled:bg-slate-100 hover:enabled:text-slate-900";
      } else {
        variantStyle =
          "text-slate-900 hover:enabled:bg-slate-900 hover:enabled:text-slate-100";
      }
      break;
    default:
      if (theme === "dark") {
        variantStyle = "bg-slate-100 text-slate-900 hover:enabled:bg-slate-300";
      } else {
        variantStyle = "bg-slate-900 text-slate-200 hover:enabled:bg-slate-700";
      }
      break;
  }

  let sizeStyle = "";
  switch (size) {
    case "small":
      sizeStyle = "px-2 py-1 text-xs";
      break;
    case "normal":
      sizeStyle = "px-4 py-2 text-base";
      break;
    case "large":
      sizeStyle = "px-8 py-4 text-xl";
      break;
    case "icon":
      sizeStyle = "px-2 py-2 text-base";
      break;
    default:
      sizeStyle = "px-4 py-2 text-base";
      break;
  }

  return (
    <button
      onClick={() => {
        onClick();
      }}
      className={`${variantStyle} ${sizeStyle} ${
        rounded ? "rounded-md" : ""
      } ease-in-out duration-300 p-2 disabled:opacity-50 
      flex flex-row justify-center items-center`}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

export default Button;

组件使用方式 #

<Button onClick={() => console.log("Test")} >Test Button</Button>

我已为此问题困扰多时，恳请大家提供帮助！

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