Question

是汇总的新手，遇到了此问题。我已经用谷歌搜索了，但似乎找不到答案，但是我很确定这是由于汇总配置所致。

我要做什么

我有一个我创建的React库，其中使用（其中包括）样式化组件，包括许多组件，这些组件扩展了通过.withComponent使用样式化组件创建的其他组件。

代码示例

Badge.js：-

import styled from "styled-components"

const Badge = styled.span`
  ...
`
export default Badge

Button.js：-

import Badge from "@my/library/Badge"
import styled from "styled-components"

export const Button = styled(Badge.withComponent("button"))`
  ...
`

rollup.config.js：-

import multiEntry from "rollup-plugin-multi-entry"
import babel from "rollup-plugin-babel"

export default {
  input: __dirname + "/src/*.js",
  plugins: [
    babel({}),
    multiEntry()
  ],
  output: {
    dir: __dirname + "/lib/",
    format: "esm",
  },
  preserveModules: true,
  external: ["@my/library", "styled-components"],
}

babel.config.js：-

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
  ],
  plugins: [
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components"
  ],
};

汇总生成以下代码：-

Badge.js：-

import { taggedTemplateLiteral as _taggedTemplateLiteral } from './_virtual/_rollupPluginBabelHelpers.js';
import styled from 'styled-components';

function _templateObject() {
  var data = _taggedTemplateLiteral([
    ...
]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var Badge = styled.span(_templateObject(), function (props) {
    ...
});

Button.js：-

import styled from 'styled-components';
import Badge from '@my/library/Badge';

var Button = styled(Badge.withComponent("button"))(_templateObject(), function (props) {
  ...
});

问题

在我的应用上运行webpack时，出现以下错误消息：-

var Button = (0, _styledComponents["default"])(_Badge["default"].withComponent("button"))(_templateObject(), function (props) {
                                                                 ^
TypeError: _Badge.default.withComponent is not a function

我不知道为什么会这样。我认为将样式化组件列为外部组件可以解决此问题，但事实并非如此。同样，我是汇总新手。任何帮助表示赞赏。

Answer 1

我不知道汇总，但是您可以尝试使用道具as

使用样式化组件的新语法

https://www.styled-components.com/docs/api#as-polymorphic-prop

import Badge from "@my/library/Badge"
import styled from "styled-components"

export const Button = styled(Badge).attrs({
  as: "button"
})`
  ...
`

您必须确保组件徽标是带样式的组件。如果没有，您可以使用styled对其进行转换。 https://www.styled-components.com/docs/basics#styling-any-component

如果没有帮助，请尝试在配置汇总中的输出全局变量中添加样式组件

const globals = {
  react: 'React',
  'styled-components': 'styled',
}

汇总，样式化组件-“ withComponent不是函数”错误

1 个答案: