CODEWITHSUNDEEP
javascriptreactjswebpackbabeljsstyled-components
Connorelsea
Connorelsea

Reputation: 2438

Using styled-components results in `cannot read withConfig of undefined`

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

enter image description here

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

enter image description here

  1. The resulting error

enter image description here

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

enter image description here

  1. Generated code making this error

enter image description here

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

Upvotes: 6

Views: 8877

Answers (2)

Maroua El Baoui
Maroua El Baoui

Reputation: 31

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

Upvotes: 2

Ryan Irilli
Ryan Irilli

Reputation: 1197

try doing styled(View) instead of styled.View

Upvotes: 7

Related Questions