Categories
Learning

Webpack cache issue: start value has mixed support, consider using flex-start instead

Hello,
If you facing issue like below:

//NextJS Compilation Error on Server Start:

(11716:3) autoprefixer: start value has mixed support, consider using flex-start instead
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|F:\WORK\maw\code\node_modules\next\dist\build\webpack\loaders\css-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[1]!F:\WORK\maw\code\node_modules\next\dist\build\webpack\loaders\postcss-loader\src\index.js??ruleSet[1].rules[2].oneOf[9].use[2]!F:\WORK\maw\code\node_modules\next\dist\build\webpack\loaders\resolve-url-loader\index.js??ruleSet[1].rules[2].oneOf[9].use[3]!F:\WORK\maw\code\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[2].oneOf[9].use[4]!F:\WORK\maw\code\styles\main.scss': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning

The reason to this is you are using wrong value, somewhere in your scss or css file, in my case i have set align-items to ‘start‘ which is incorrect so compilation through’s error when running nextjs server. 

align-items start value issue

Fix, is simple correct it with the right value, so I have updated with ‘flex-start’ fixed the compilation issue and server is up and running. 

Hope this quick help would save your time!

Happy Learning.