javascript - 使用样式化组件会导致“无法读取未定义的withConfig”

尝试转译Spacing.js文件时，即使在其他文件中似乎成功导入并使用styled-components（以相同方式）的情况下，也会导致未定义的导入。即使删除样式化组件babel插件，也会发生类似的错误。

.babelrc

{
  "presets": [["es2015", { "modules": false }], "react-native"],
  "plugins": [
    ["styled-components", { "displayName": true }],
    "react-hot-loader/babel",
    "react-native-web",
    "transform-decorators-legacy",
    "transform-class-properties"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-react-inline-elements",
        "transform-react-constant-elements"
      ]
    }
  }
}

Spacing.js-编译前的代码

import React, { Component, Node } from "React";
import styled from "styled-components";

type Props = {
  size: string,
  color: string,
  fullWidth?: boolean
};

class SpacingComponent extends Component<Props> {
  render(): Node {
    const { size, color, fullWidth = false } = this.props;
    return <Spacing size={size} color={color} fullWidth={fullWidth} />;
  }
}

const Spacing = styled.View`
  height: ${props => props.size}px;
  background-color: ${props => props.color || "transparent"};
  width: ${props => {
    return props.fullwidth ? "100%" : props.size + "px";
  }};
`;

export default SpacingComponent;

生成的用于导入和解析styled-components的代码





使用styled-components库（v3.2.5）生成的代码





产生的错误




从babelrc中删除styled-components babel插件时，可以看到另一个示例，因此不添加withConfig。


没有styled-components babel插件的生成的错误





产生此错误的代码






babel或webpack是否在不需要时添加.default，如果需要，我如何调查原因？

最佳答案

尝试做styled(View)而不是styled.View