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

.babelrc

{
  "presets": [["es2015", { "modules": false }], "react-native"],
  "plugins": [
    ["styled-ponents", { "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-ponents";

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-ponents

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

3. The resulting error

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

1. Generated error with no styled-ponents 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?

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

.babelrc

{
  "presets": [["es2015", { "modules": false }], "react-native"],
  "plugins": [
    ["styled-ponents", { "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-ponents";

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-ponents

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

3. The resulting error

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

1. Generated error with no styled-ponents 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?

• javascript
• reactjs
• webpack
• babeljs
• styled-ponents

• 1 Not a solution to the problem, but I'd remend switching to the env preset instead of es2015, for reasons described on the linked page – kingdaro Commented Apr 13, 2018 at 20:34
• I was using env originally and switched to es2015 to see if my env config was causing the error, but it wasn't. Thanks for reminding me to switch back – Connorelsea Commented Apr 13, 2018 at 21:09

2 Answers 2

try doing styled(View) instead of styled.View

Not sure if this is going to be helpful to anyone but for me the same error was triggered like this style.something and fixed using an html element eg style.span