汇总，样式组件 - "withComponent is not a function" 错误

Question

rollup 还很陌生，遇到过这个问题。我已经用谷歌搜索了，但我似乎找不到答案，但我很确定这是由于汇总配置造成的。

我想做什么

我创建了一个 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"
  ],
};

rollup 生成以下代码：-

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

我不知道为什么会这样。我认为将 styled-components 列为外部可以解决这个问题，但事实并非如此。同样，我是汇总的新手。非常感谢任何帮助。

Answer 1

我不知道 rollup 但你可以尝试使用 styled-components 的新语法和 prop 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"
})`
  ...
`

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

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

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

汇总，样式组件 - "withComponent is not a function" 错误

rollup, styled-components - "withComponent is not a function" error

reactjs

rollupjs

styled-components