Next.js构建报错：HookWebpackError: Cannot set properties of undefined

问题背景 #

未修改任何配置文件，仅新增动画库及自定义代码后，执行next build时触发构建失败，错误指向cssnano处理CSS时的类型错误。

错误分析 #

从报错日志可见，问题出在cssnano-simple的normalizeBoxShadow函数中，尝试给undefined设置type属性，根源是某个CSS文件中的box-shadow声明存在语法问题，或包含cssnano无法解析的内容，具体位置对应生产构建后的static/css/04a7d2f9c1ff8270.css第1335行。

解决方案 #

1. 定位问题CSS代码 #

• 运行next dev启动开发服务器，在浏览器开发者工具中找到对应样式的来源文件（生产构建的CSS是压缩后的，开发环境的CSS可直接定位到源文件）
• 重点排查新增动画库、自定义组件中的box-shadow写法，常见问题包括：
  • 空的box-shadow声明（如box-shadow: ;）
  • 缺少必要参数的不完整写法（如仅写box-shadow: 0 0;）
  • 使用了实验性语法或无效变量引用

2. 验证cssnano是否为诱因 #

临时关闭Next.js的CSS压缩功能，确认是否是cssnano的处理逻辑导致：
在next.config.js中添加配置：

module.exports = {
  compiler: {
    cssMinimizer: false,
  },
};

重新执行next build，若构建成功则证明问题出在cssnano对特定CSS的处理，再针对性修复样式。

3. 排查新增依赖 #

• 临时移除新增的动画库，逐个恢复排查，确认是否是某款库引入了异常样式
• 若使用CSS框架（如Tailwind），检查自定义工具类的box-shadow是否符合框架语法规范

4. 修复样式问题 #

找到问题的box-shadow声明后，修正为标准CSS语法：

• 错误示例：box-shadow: ; 或 box-shadow: 0 0;
• 正确示例：box-shadow: none; 或 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

内容的提问来源于stack exchange，提问作者Ali Salih