TypeError: Cannot read property 'toLowerCase' of undefined

• Laravel Mix Version: 6.0.10 (npm list --depth=0)
• Node Version (node -v): 14.15.4
• NPM Version (npm -v): 6.14.11
• OS: Microsoft Windows [Version 10.0.19042.685]

Description:

Receiving the below error when executing “npm run prod” on a project using the Keen Bootstrap theme.

---

Console Output

c:\dev\workspace\laravel>npm run prod

@ prod c:\dev\workspace\laravel npm run production

@ production c:\dev\workspace\laravel mix --production

ERROR in ./resources/sass/app.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): TypeError: Cannot read property ‘toLowerCase’ of undefined at c:\dev\workspace\laravel\resources\sass\app.scss:61517:1 at c:\dev\workspace\laravel\resources\sass\app.scss:61518:3 at hasInherit (c:\dev\workspace\laravel\node_modules\postcss-merge-longhand\dist\lib\canExplode.js:13:39) at exports.default (c:\dev\workspace\laravel\node_modules\postcss-merge-longhand\dist\lib\canExplode.js:22:13) at c:\dev\workspace\laravel\node_modules\postcss-merge-longhand\dist\lib\decl\borders.js:192:39 at c:\dev\workspace\laravel\node_modules\postcss\lib\container.js:98:18 at c:\dev\workspace\laravel\node_modules\postcss\lib\container.js:74:18 at Rule.each (c:\dev\workspace\laravel\node_modules\postcss\lib\container.js:60:16) at Rule.walk (c:\dev\workspace\laravel\node_modules\postcss\lib\container.js:71:17) at Rule.walkDecls (c:\dev\workspace\laravel\node_modules\postcss\lib\container.js:96:19) at Object.explode (c:\dev\workspace\laravel\node_modules\postcss-merge-longhand\dist\lib\decl\borders.js:191:10) at c:\dev\workspace\laravel\node_modules\postcss-merge-longhand\dist\index.js:21:19 at processResult (c:\dev\workspace\laravel\node_modules\webpack\lib\NormalModule.js:597:19) at c:\dev\workspace\laravel\node_modules\webpack\lib\NormalModule.js:691:5 at c:\dev\workspace\laravel\node_modules\loader-runner\lib\LoaderRunner.js:399:11 at c:\dev\workspace\laravel\node_modules\loader-runner\lib\LoaderRunner.js:251:18 at context.callback (c:\dev\workspace\laravel\node_modules\loader-runner\lib\LoaderRunner.js:124:13) at Object.loader (c:\dev\workspace\laravel\node_modules\postcss-loader\dist\index.js:103:7)

The error wasn’t helpful, but I was able to track down the offending code.

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

        &:after {
			display: block;
        }
    }
}

---

Removing “!important” produced a successful outcome.

---

Steps To Reproduce:

1. laravel new laravel

2. Follow integration guides located at… — https://keenthemes.com/keen/?page=docs&section=html-webpack-quick-start — https://keenthemes.com/keen/?page=docs&section=laravel-integration

3. npm install && npm run prod

FYI: Using “!important” is not an issue when used with standard CSS markup.

[jamesparkes]

how was this resolved? i do have cssnano as a package in my project, but i’m still receiving this error?

[Volen99]

IDK about you guys, but updating to Angular 13 fixed it for me ♥