TypeError：a.button不是函数样式组件nextjs

Question

这是一个很难调试的问题。由于 UI 组件库（我是其作者）的错误，我的下一个构建失败，我正在尝试调试该错误。有什么建议吗？

错误是a.按钮不是函数

- wait compiling...
- event compiled client and server successfully in 227 ms (361 modules)
- error node_modules/layla-ui-library/dist/cjs/index.js (1:534) @ eval
- error TypeError: a.button is not a function
    at __webpack_require__ (/Users/.../.next/server/webpack-runtime.js:33:43)

查看 dist/cjs/index,js 我可以看到它指的是什么，但是如何将其与代码中的错误联系起来？

 o = a.button(
    i ||
      (i = s(
        [
          "\n  height: ",
          ";\n  border-radius: 4px;\n  font-size: ",
          ";\n  width: auto;\n  background-color: ",
          ";\n  color: #000000;\n  cursor: pointer;\n  border: ",
          ";\n  background: ",
          ";\n",
        ],
        [
          "\n  height: ",
          ";\n  border-radius: 4px;\n  font-size: ",
          ";\n  width: auto;\n  background-color: ",
          ";\n  color: #000000;\n  cursor: pointer;\n  border: ",
          ";\n  background: ",
          ";\n",
        ]
      )),
    function (c) {
      return c.size ? l(c.size) : l("md");
    },
    function (c) {
      return c.size
        ? (function (c) {
            switch (c) {
              case "sm":
                return "10px";
              case "md":
              default:
                return "12px";
              case "lg":
                return "14px";
            }
          })(c.size)
        : "md";
    },
    function (c) {
      return c.color ? c.color : null;
    },
    function (c) {
      return c.transparent ? "none" : null;
    },
    function (c) {
      return c.transparent ? "none" : null;
    }
  ),

可能与造型有关？

import styled from "styled-components";
import { getButtonFontSize, getButtonSize } from "../../utils/getSize.utils";

export interface StyledButtonProps {
  size?: "sm" | "md" | "lg";
  color: string | undefined;
  transparent?: "true" | "false";
}

export const StyledButton = styled.button<StyledButtonProps>`
  height: ${(props) =>
    props.size ? getButtonSize(props.size) : getButtonSize("md")};
  border-radius: 4px;
  font-size: ${(props) => (props.size ? getButtonFontSize(props.size) : "md")};
  width: auto;
  background-color: ${(props) => (props.color ? props.color : null)};
  color: #000000;
  cursor: pointer;
  border: ${(props) => (props.transparent === "true" ? "none" : null)};
  background: ${(props) => (props.transparent === "true" ? "none" : null)};
`;

按钮组件在这里：https://github.com/RichEwin/layla-ui/tree/master/src/components/Button

Answer 1

我的猜测是，您在下一个项目中缺少

styled-components

作为依赖项。上面的错误基本上表明

a

未定义，因此

a.button

不是一个函数。

查看您的项目 package.json，我注意到您将其标记为框架的 dependency，但它也是已编译构建的 external。但是，您需要将其标记为框架的peerDendepency。因此，如果有人只是安装

layla-ui

，那么他们还会看到一条警告，表明他们需要安装

styled-components

（包管理器将显示一条警告，表明尚未满足对等依赖关系）。