Cannot read property 'toLowerCase' of undefined when building SASS for production

user_11356638 0
Viewed 1069

So I have this situation after when I run yarn build, I get this:

Creating an optimized production build...
Failed to compile.

Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .checkbox.checkbox-accent>span

I traced everything to this SCSS region:

    &.checkbox-accent {
        > span {
            border-width: get($checkbox-config, types, accent, borderWidth) !important;
            border-style: solid !important;
            background-color: transparent !important;

            &:after {
                display: block;
            }
        }
    }

When this is commented out, yarn build works without errors. I am looking for suggestions on possible reasons for this error.

sass
1 Answers

I had the same problem with a theme called Metronic. The get function itself gets you a nested value from an SCSS map. There is no accent value in the map $checkbox-config which by default is:

// Checkbox
$checkbox-config: (
    transition: all 0.3s ease,
    itemSpace: 1rem,
    labelSpace: 0.75rem,
    inlineItemSpace: 0.35rem,
    types: (
        solid: (
            theme: (
                base-color: $gray-200
            ),
            sizes: (
                default: (
                    base: 18px,
                    tick: 10px,
                ),
                lg: (
                    base: 24px,
                    tick: 12px,
                )
            )
        ),
        outline: (
            theme: (
                base-color: $gray-400
            ),
            sizes: (
                default: (
                    base: 18px,
                    tick:  10px,
                ),
                lg: (
                    base: 24px,
                    tick: 12px,
                )
            )
        )
) !default;

As you can see there is no property (root) > types > accent > borderWidth.

To solve this amend the variable to the following (values for pixels taken from the radio button to maintain style):

// Checkbox
$checkbox-config: (
    transition: all 0.3s ease,
    itemSpace: 1rem,
    labelSpace: 0.75rem,
    inlineItemSpace: 0.35rem,
    types: (
        solid: (
            theme: (
                base-color: $gray-200
            ),
            sizes: (
                default: (
                    base: 18px,
                    tick: 10px,
                ),
                lg: (
                    base: 24px,
                    tick: 12px,
                )
            )
        ),
        outline: (
            theme: (
                base-color: $gray-400
            ),
            sizes: (
                default: (
                    base: 18px,
                    tick:  10px,
                ),
                lg: (
                    base: 24px,
                    tick: 12px,
                )
            )
        ),
        accent: (
            borderWidth: 3px,
            sizes: (
                default: (
                    base: 24px,
                    tick: 14px,
                ),
                lg: (
                    base: 30px,
                    tick:  10px,
                )
            )
        )
    )
) !default;
user_16472000
Related