1.13.2 generates cannot read property 'property' of undefined

[Kolombiken]

I'm using Next.js and when trying 1.13.2 I get the following webpack-error for a component:

TypeError: Form.tsx: Cannot read property 'property' of undefined

The only css in the component are three declarations looking like this:

const StyledFormComponent = styled.divdisplay: flex;;

With 1.13.1 there are no errors.

[quantizor]

Going to need some sort of reproduction

[ivan-navarro-75]

I am getting something similar when using an object as a css value <div css={{ position: 'relative', zIndex: 1 }}> Cannot read property 'toString' of undefined

but if I extract the value like this

const zIndex = 1
  return (
    <div css={{ position: 'relative', zIndex }}>

then it is not complaining

and it is only failing with zIndex, no issues with position

I've tried last version 1.13.2 and 1.12.0

[albertogasparin]

Same here,

TypeError: components/Button.js: Cannot read property 'property' of undefined
      at node_modules/babel-plugin-styled-components/lib/utils/detectors.js:85:686
      at node_modules/babel-plugin-styled-components/lib/visitors/pure.js:18:36
      at PluginPass.CallExpression (node_modules/babel-plugin-styled-components/lib/index.js:45:30)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:171:21)

Wonder if it is an issue with the way TS converts template literals, as the outputted code is:

var StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), getButtonStyles_1.default);
StyledButton.displayName = 'StyledButton';
// Target the <a> here to override a:hover specificity.
var StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  a& {\n    ", ";\n  }\n"], ["\n  a& {\n    ", ";\n  }\n"])), getButtonStyles_1.default);
StyledLink.displayName = 'StyledLink';
var StyledSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), getButtonStyles_1.default);
StyledSpan.displayName = 'StyledSpan';

[albertogasparin]

Oh, btw found a workaround: setting "pure": false skips the code path that blows up

[quantizor]

Same here,

TypeError: components/Button.js: Cannot read property 'property' of undefined
      at node_modules/babel-plugin-styled-components/lib/utils/detectors.js:85:686
      at node_modules/babel-plugin-styled-components/lib/visitors/pure.js:18:36
      at PluginPass.CallExpression (node_modules/babel-plugin-styled-components/lib/index.js:45:30)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:171:21)

Wonder if it is an issue with the way TS converts template literals, as the outputted code is:

var StyledButton = styled_components_1.default.button(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), getButtonStyles_1.default);
StyledButton.displayName = 'StyledButton';
// Target the <a> here to override a:hover specificity.
var StyledLink = styled_components_1.default.a(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n  a& {\n    ", ";\n  }\n"], ["\n  a& {\n    ", ";\n  }\n"])), getButtonStyles_1.default);
StyledLink.displayName = 'StyledLink';
var StyledSpan = styled_components_1.default.span(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), getButtonStyles_1.default);
StyledSpan.displayName = 'StyledSpan';

Can you post the code that leads to this error so I can make a test case for it? Ty.

[gmukul01]

I am also facing the same issue. To reproduce the issue you can checkout this branch feat/use-medly-linting-configs of https://github.com/medly/medly-components and then run yarn build & yarn test. For a quick glance below is the error I am getting.

Error

TypeError: /Users/mukul/workspace/medly-open-source/medly-components/packages/icons/dist/cjs/SvgIcon/SvgIcon.styled.js: Cannot read property 'property' of undefined

      at node_modules/babel-plugin-styled-components/lib/utils/detectors.js:85:686
      at node_modules/babel-plugin-styled-components/lib/utils/detectors.js:71:25
      at node_modules/babel-plugin-styled-components/lib/utils/detectors.js:71:25
      at node_modules/babel-plugin-styled-components/lib/visitors/displayNameAndId.js:158:30
      at PluginPass.CallExpression (node_modules/babel-plugin-styled-components/lib/index.js:44:42)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:177:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:90:31)
      at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:103:16)

dist/cjs/SvgIcon/SvgIcon.styled.js

'use strict';
Object.defineProperty(exports, '__esModule', { value: !0 });
var o = require('@medly-components/utils'),
    r = require('styled-components');
function e(o) {
    return o && 'object' == typeof o && 'default' in o ? o : { default: o };
}
var n = function (o) {
        var e = o.hoverBgColor,
            n = o.hoverIconColor;
        return r.css(
            ['&:hover{background-color:', ';*{fill:', ';}}'],
            function (o) {
                var r = o.theme;
                return e || r.icon.colors.hovered.bgColor;
            },
            function (o) {
                var r = o.theme;
                return n || r.icon.colors.hovered.iconColor;
            }
        );
    },
    i = function (o) {
        var e = o.size,
            i = o.disabled,
            t = o.bgColor,
            l = o.withHoverEffect;
        return r.css(
            ['padding:', ';border-radius:', ';background-color:', ';', ''],
            function (o) {
                return o.theme.icon.sizes[e].padding;
            },
            function (o) {
                return o.theme.icon.borderRadius;
            },
            function (o) {
                var r = o.theme;
                return i ? r.icon.colors.disabled.bgColor : t || r.icon.colors.default.bgColor;
            },
            !i && l && n
        );
    },
    t = e(r)
        .default(o.InjectClassName)
        .attrs(function (o) {
            var r = o.theme.icon;
            return { colors: r.colors, sizes: r.sizes };
        })
        .withConfig({ displayName: 'SvgIconstyled__SvgIconStyled', componentId: 'sc-1pf3x8a-0' })(
        [
            'overflow:visible;font-size:',
            ';transition:all 100ms linear;margin:',
            ';cursor:',
            ';*{fill-opacity:',
            ';transition:all 100ms linear;fill:',
            ';}',
            ''
        ],
        function (o) {
            var r = o.theme,
                e = o.size;
            return r.icon.sizes[e].iconSize;
        },
        function (o) {
            return o.margin;
        },
        function (o) {
            var r = o.onClick;
            return o.disabled ? 'not-allowed' : r ? 'pointer' : 'inherit';
        },
        function (o) {
            return o.fillOpacity;
        },
        function (o) {
            var r = o.disabled,
                e = o.colors,
                n = o.iconColor;
            return r ? e.disabled.iconColor : n || e.default.iconColor;
        },
        function (o) {
            return 'solid' === o.variant && i;
        }
    );
(t.displayName = 'SvgIcon'), (t.defaultProps = { size: 'M', fillOpacity: 1 }), (exports.SvgIconStyled = t);

SVGIcon.styled.tsx

import { InjectClassName } from '@medly-components/utils';
import styled, { css } from 'styled-components';
import { SvgIconProps } from './types';

const hoverStyle = ({ hoverBgColor, hoverIconColor }: SvgIconProps) => css`
    &:hover {
        background-color: ${({ theme }) => hoverBgColor || theme.icon.colors.hovered.bgColor};
        * {
            fill: ${({ theme }) => hoverIconColor || theme.icon.colors.hovered.iconColor};
        }
    }
`;

const solidStyle = ({ size, disabled, bgColor, withHoverEffect }: SvgIconProps) => css`
    padding: ${({ theme }) => theme.icon.sizes[size!].padding};
    border-radius: ${({ theme }) => theme.icon.borderRadius};
    background-color: ${({ theme }) => (disabled ? theme.icon.colors.disabled.bgColor : bgColor || theme.icon.colors.default.bgColor)};

    ${!disabled && withHoverEffect && hoverStyle}
`;

export const SvgIconStyled = styled(InjectClassName).attrs(
    ({
        theme: {
            icon: { colors, sizes }
        }
    }) => ({
        colors,
        sizes
    })
)<SvgIconProps>`
    overflow: visible;
    font-size: ${({ theme, size }) => theme.icon.sizes[size!].iconSize};
    transition: all 100ms linear;
    margin: ${({ margin }) => margin};
    cursor: ${({ onClick, disabled }) => (disabled ? 'not-allowed' : onClick ? 'pointer' : 'inherit')};
    * {
        fill-opacity: ${({ fillOpacity }) => fillOpacity};
        transition: all 100ms linear;
        fill: ${({ disabled, colors, iconColor }) => (disabled ? colors.disabled.iconColor : iconColor || colors.default.iconColor)};
    }

    ${({ variant }) => variant === 'solid' && solidStyle}
`;

SvgIconStyled.displayName = 'SvgIcon';
SvgIconStyled.defaultProps = {
    size: 'M',
    fillOpacity: 1
};

[gmukul01]

@probablyup Actually the error occurs only in files where I am using css helper.

[gmukul01]

Actually this was happening because of one of babel version. You can checkout the latest version being used in medly-components

[pawelczerepak]

It's still a problem in 2.0.6. Here's a simple reproduction:

import styled from "styled-components";

const WrappedComponent = styled.default()``;

You can paste that into one of your tests and it will fail. The issue is with this code in detectors.js:

(importLocalName('default', state) &&
        t.isCallExpression(tag) &&
        t.isMemberExpression(tag.callee) &&
        tag.object.property.name === 'default' &&
        tag.object.object.name === importLocalName('default', state))

tag.object is undefined. There's tag.callee in one place and tag.object in another. I assume that's the problem.

[JohnnyCrazy]

@probablyup The above comment already describes the error, probably a simple copy-paste error.

I guess the correct line would be:

(importLocalName('default', state) &&
        t.isCallExpression(tag) &&
        t.isMemberExpression(tag.callee) &&
        tag.callee.property.name === 'default' &&
        tag.callee.object.name === importLocalName('default', state))

I can provide a PR if you come to the same fix/conclusion as above

Without a fix, importing minified ES6 code, which uses sc, doesn't work when the babel plugin is utilized.

[quantizor]

I'm honestly afraid to touch that code at this point. I've made updates multiple times that worked fine in testing and then caused all sorts of havoc in people's production setups :/

[JohnnyCrazy]

Mh, understandable.

We will have to go for forking then! Thanks for keeping the project open-source so this is even possible 👍🏼

[tanmay-pnaik]

Is there any update on this issue? Facing it in the latest version on a Next.js application.

[tanmay-pnaik]

Is there any update on this issue? Facing it in the latest version on a Next.js application.

Turned out to be a config issue in our application.

[mauricioross]

Hi tanmay-pnaik, you can say what are bad config in your app?

[andi1984]

Having the same issue w/ rollup generated code that changed from:

styled__default["default"] which works to styled__default.default which fails here.

Any update on this?

It failse for me at Cannot read properties of undefined (reading 'property') on tag.object.property because tag.object seems undefined.

[andi1984]

FYI: Rollup v3 output.generatedCode.reservedNamesAsProps setting on true is not compatible with this plugin due to this bug. Thus for now whenever you generate code containing styled-components from rollup, set output.generatedCode.reservedNamesAsProps to false in rollup.

[renarsvilnis]

Adding on @andi1984 I also had added output.interop: "auto" to act the same as [email protected]: true

[chaburgess]

Setting the rollup options mentioned by @andi1984 and @renarsvilnis solved this issue for us as well:

output: {
  interop: "auto",
  generatedCode: {
    reservedNamesAsProps: false,
  },
}