Next.js Build failed because of webpack errors: CssSyntaxError

[AlexMarcoDAngelo]

Summary

I've been stuck and going all over internet trying to figure something that prevents my app to be build on Vercell (well locally as well).

• npm run dev - works great, no issues
• stylelint and eslint are cleaned up - no errors

The error comes from css-minimizer-plugin and is CssSyntaxError: Unknown word.

My question is - since it only shows location of the error inside static\css\363329e5478d19a3.css which gets immediately deleted when build fails - how on earth i can figure out what is the issue (what line of code in which file?)

Example

No response

Steps to Reproduce

Failed to compile.

HookWebpackError: localsitelocation\static\css\363329e5478d19a3.css:69:37: Unknown word
    at makeWebpackError (localsitelocation\node_modules\next\dist\compiled\webpack\bundle5.js:28:312635)
    at localsitelocation\node_modules\next\dist\compiled\webpack\bundle5.js:28:106060
    at eval (eval at create (localsitelocation\node_modules\next\dist\compiled\webpack\bundle5.js:13:28858), <anonymous>:44:1)
-- inner error --
CssSyntaxError: localsitelocation\static\css\363329e5478d19a3.css:69:37: Unknown word
    at Input.error (localsitelocation\node_modules\next\node_modules\postcss\lib\input.js:106:16)
    at ScssParser.unknownWord (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:594:22)
    at ScssParser.decl (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:237:16)
    at ScssParser.other (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:434:12)
    at ScssParser.parse (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:471:16)
    at scssParse (localsitelocation\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:322)
    at new LazyResult (localsitelocation\node_modules\next\node_modules\postcss\lib\lazy-result.js:133:16)
    at Processor.process (localsitelocation\node_modules\next\node_modules\postcss\lib\processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (localsitelocation\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:48:12)
    at localsitelocation\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:79:55
caused by plugins in Compilation.hooks.processAssets
CssSyntaxError: localsitelocation\static\css\363329e5478d19a3.css:69:37: Unknown word
    at Input.error (localsitelocation\node_modules\next\node_modules\postcss\lib\input.js:106:16)
    at ScssParser.unknownWord (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:594:22)
    at ScssParser.decl (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:237:16)
    at ScssParser.other (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:434:12)
    at ScssParser.parse (localsitelocation\node_modules\next\node_modules\postcss\lib\parser.js:471:16)
    at scssParse (localsitelocation\node_modules\next\dist\compiled\postcss-scss\scss-syntax.js:1:322)
    at new LazyResult (localsitelocation\node_modules\next\node_modules\postcss\lib\lazy-result.js:133:16)
    at Processor.process (localsitelocation\node_modules\next\node_modules\postcss\lib\processor.js:53:14)
    at CssMinimizerPlugin.optimizeAsset (localsitelocation\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:48:12)        
    at localsitelocation\node_modules\next\dist\build\webpack\plugins\css-minimizer-plugin.js:79:55

> Build failed because of webpack errors

[pawlean]

Hi @AlexMarcoDAngelo!

I've been stuck and going all over internet trying to figure something that prevents my app to be build on Vercel (well locally as well).

It looks like this is happening locally too, so not entirely a Vercel issue. However, I recommend reviewing your CSS/SCSS files for syntax errors or invalid properties. Common mistakes include missing semicolons, misplaced braces, or incorrect property names.

When I hit issues like this, I also like commenting out bits of code and re-building until I identify the piece that is causing issues.

Let us know how you get on! Good luck!

[sahilatahar]

I faced the same issue and solved it.

See solution on Stack Overflow

[github-actions[bot]]

This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community