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

Question

当尝试转换文件时，即使看似在其他文件中成功导入并使用（以相同的方式），也会Spacing.js导致未定义的导入。styled-components即使删除 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;

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

2. 生成的使用该styled-components库的代码 (v3.2.5)

3. 由此产生的错误

另一个例子是styled-components从 babelrc 中删除 babel 插件，因此没有添加 withConfig 。

1. 没有styled-componentsbabel 插件时生成错误

2. 生成的代码出现此错误

---

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

Answer 1

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