Laravel-mix: TypeError: Cannot read property 'toLowerCase' of undefined

Created on 14 Jan 2021  Â·  5Comments  Â·  Source: JeffreyWay/laravel-mix

  • 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.

Most helpful comment

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

All 5 comments

This was an issue in 6.0.9 as well. Not sure about previous versions.

Same issue for npm run prod

  • Laravel Mix Version: 6.0.10
  • Node Version (node -v): 15.6.0
  • NPM Version (npm -v): 7.4.2
  • OS: Microsoft Windows

ERROR in ./resources/sass/style.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

This seems to be a cssnano issue.

https://github.com/cssnano/cssnano/issues/743

Once they tag a new release, your problem should fix itself after you update.

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

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

Could be a transitive dependency. I am facing the same exact thing.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jpriceonline picture jpriceonline  Â·  3Comments

stefensuhat picture stefensuhat  Â·  3Comments

rlewkowicz picture rlewkowicz  Â·  3Comments

dtheb picture dtheb  Â·  3Comments

Bomavi picture Bomavi  Â·  3Comments