使用 styled-components 导致 `cannot read withConfig of undefined`

Question

When attempting to transpile the Spacing.js file, it results in an undefined import even when styled-components was seemingly being imported and used (in the same way) successfully in other files. Even when removing the styled-components babel plugin, a similar error occurs.

.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 - Code before transpilation

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. Generated code for importing and resolving styled-components

2. Generated code for using the styled-components library (v3.2.5)

3. The resulting error

Another example can be seen when removing the styled-components babel plugin from the babelrc, thus the withConfig is not added.

1. Generated error with no styled-components babel plugin

2. Generated code making this error

---

Is babel or webpack adding .default when it doesn't need to, if so, how could I investigate why?

Answer 1

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

Answer 2

不确定这是否对任何人都有帮助，但对我来说，同样的错误被触发，如style.something并使用 html 元素（例如style.span