1.13.2 generates cannot read property 'property' of undefined #341

Kolombiken · 2021-07-09T11:22:03Z

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.

The text was updated successfully, but these errors were encountered:

quantizor · 2021-07-09T21:24:45Z

Going to need some sort of reproduction

ivan-navarro-75 · 2021-07-12T15:55:29Z

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 · 2021-09-01T23:54:27Z

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 · 2021-09-02T01:20:23Z

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

quantizor · 2021-09-02T17:35:11Z

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 · 2021-10-17T05:08:25Z

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 · 2021-10-18T11:02:38Z

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

gmukul01 · 2021-10-21T14:01:15Z

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

pawelczerepak · 2022-02-25T21:48:19Z

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 · 2022-04-13T10:37:29Z

@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 · 2022-04-13T20:01:10Z

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 · 2022-04-14T11:20:22Z

Mh, understandable.

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

tanmay-pnaik · 2022-09-29T21:07:03Z

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

tanmay-pnaik · 2022-10-06T07:24:40Z

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 · 2022-10-24T04:14:08Z

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

andi1984 · 2022-10-25T12:05:16Z

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 · 2022-10-25T13:25:18Z

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 · 2022-12-05T15:31:19Z

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

chaburgess · 2023-01-12T16:41:07Z

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1.13.2 generates cannot read property 'property' of undefined #341

1.13.2 generates cannot read property 'property' of undefined #341

Kolombiken commented Jul 9, 2021

quantizor commented Jul 9, 2021

ivan-navarro-75 commented Jul 12, 2021

albertogasparin commented Sep 1, 2021

albertogasparin commented Sep 2, 2021

quantizor commented Sep 2, 2021

gmukul01 commented Oct 17, 2021

gmukul01 commented Oct 18, 2021 •

edited

Loading

gmukul01 commented Oct 21, 2021

pawelczerepak commented Feb 25, 2022

JohnnyCrazy commented Apr 13, 2022

quantizor commented Apr 13, 2022

JohnnyCrazy commented Apr 14, 2022

tanmay-pnaik commented Sep 29, 2022

tanmay-pnaik commented Oct 6, 2022

mauricioross commented Oct 24, 2022

andi1984 commented Oct 25, 2022 •

edited

Loading

andi1984 commented Oct 25, 2022

renarsvilnis commented Dec 5, 2022

chaburgess commented Jan 12, 2023 •

edited

Loading

1.13.2 generates cannot read property 'property' of undefined #341

1.13.2 generates cannot read property 'property' of undefined #341

Comments

Kolombiken commented Jul 9, 2021

quantizor commented Jul 9, 2021

ivan-navarro-75 commented Jul 12, 2021

albertogasparin commented Sep 1, 2021

albertogasparin commented Sep 2, 2021

quantizor commented Sep 2, 2021

gmukul01 commented Oct 17, 2021

gmukul01 commented Oct 18, 2021 • edited Loading

gmukul01 commented Oct 21, 2021

pawelczerepak commented Feb 25, 2022

JohnnyCrazy commented Apr 13, 2022

quantizor commented Apr 13, 2022

JohnnyCrazy commented Apr 14, 2022

tanmay-pnaik commented Sep 29, 2022

tanmay-pnaik commented Oct 6, 2022

mauricioross commented Oct 24, 2022

andi1984 commented Oct 25, 2022 • edited Loading

andi1984 commented Oct 25, 2022

renarsvilnis commented Dec 5, 2022

chaburgess commented Jan 12, 2023 • edited Loading

gmukul01 commented Oct 18, 2021 •

edited

Loading

andi1984 commented Oct 25, 2022 •

edited

Loading

chaburgess commented Jan 12, 2023 •

edited

Loading