Loading...
Loading...
HookWebpackError: Cannot read properties of undefined (reading 'length') in cssnano-simpleThis Next.js build crash happens during the production build step when Webpack tries to minify your Tailwind CSS using `cssnano-simple`. The error is notoriously cryptic. It is overwhelmingly caused by a malformed CSS gradient, an unclosed CSS bracket, or an invalid CSS variable syntax hidden somewhere in your `globals.css` or Tailwind config.
Carefully inspect your `globals.css` for any syntax errors. Look for trailing commas, broken variable interpolations, or invalid linear-gradients.
/* ❌ This will crash Next.js cssnano-simple */
.bg-broken {
background: linear-gradient(to right, #000, );
}
/* ✅ Fix the invalid syntax */
.bg-fixed {
background: linear-gradient(to right, #000, #fff);
}If you need to ship a build immediately, you can disable optimization. This produces an unoptimized app but bypasses the crash.
// next.config.ts / next.config.js
const nextConfig = {
webpack: (config) => {
config.optimization.minimize = false;
return config;
},
};
export default nextConfig;If you have complex custom plugins or theme extensions in `tailwind.config.ts`, verify that none of the generated values end up creating invalid CSS strings.
Fix this error faster with our free tool