Next.js项目执行pnpm run build时出现HookWebpackError报错求助

我的Next.js项目执行pnpm run build命令时出现以下错误，但dev模式运行正常：

项目package.json配置 #

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@icons-pack/react-simple-icons": "^9.5.0",
    "@tailwindcss/postcss": "4.0.0-alpha.13",
    "@types/node": "20.11.17",
    "@types/react": "18.2.55",
    "@types/react-dom": "18.2.19",
    "@vercel/analytics": "^1.1.3",
    "@vercel/speed-insights": "^1.0.9",
    "framer-motion": "^11.2.10",
    "geist": "^1.3.0",
    "lucide-react": "^0.394.0",
    "next": "14.2.0-canary.62",
    "next-mdx-remote": "^4.4.1",
    "postcss": "^8.4.35",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "rehype-pretty-code": "^0.13.2",
    "remark-gfm": "3.0.1",
    "shiki": "^1.6.4",
    "sugar-high": "^0.6.0",
    "tailwindcss": "4.0.0-alpha.13",
    "typescript": "5.3.3"
  }
}

构建报错信息 #

Creating an optimized production build ...
Failed to compile.

HookWebpackError: Cannot read properties of undefined (reading '0')
    at makeWebpackError (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:312635)
    at /Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:28:106060
    at eval (eval at create (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/webpack/bundle5.js:13:28858), <anonymous>:44:1)
-- inner error --
TypeError: Cannot read properties of undefined (reading '0')
    at /Users/sintuboro/Desktop/boroblog/static/css/fab7be39e746a489.css:2:32011
    at Parser.attribute (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79568)
    at Parser.parse (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93417)
    at Parser.loop (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93089)
    at new Parser (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79163)
    at Processor._root (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96105)
    at Processor._runSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96612)
    at Processor.processSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:97367)
    at /Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:36530
    at Array.every (<anonymous>)
    at ensureCompatibility (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:35918)
caused by plugins in Compilation.hooks.processAssets
TypeError: Cannot read properties of undefined (reading '0')
    at /Users/sintuboro/Desktop/boroblog/static/css/fab7be39e746a489.css:2:32011
    at Parser.attribute (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79568)
    at Parser.parse (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93417)
    at Parser.loop (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93089)
    at new Parser (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79163)
    at Processor._root (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96105)
    at Processor._runSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96612)
    at Processor.processSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:97367)
    at /Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:36530
    at Array.every (<anonymous>)
    at ensureCompatibility (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/next@14.2.0-canary.62_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/compiled/cssnano-simple/index.js:190:35918)


> Build failed because of webpack errors

排查解决步骤 #

• 定位异常CSS代码：报错指向static/css/fab7be39e746a489.css第2行32011位，查看该位置的CSS，检查是否存在语法错误（比如不完整的属性值、异常选择器、未闭合的括号等）
• 更换稳定版Next.js：当前使用的是14.2.0-canary.62预览版，存在兼容性风险，降级到正式稳定版（如14.1.4或14.2.0正式版）后重新构建
• 调整CSS压缩配置：在next.config.js中禁用CSS压缩，验证是否是cssnano处理导致的问题：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    compiler: {
      css: {
        minify: false,
      },
    },
  };
  
  module.exports = nextConfig;
  

• 降级Tailwind CSS版本：Tailwind v4 alpha版本与Next.js构建流程可能存在兼容性问题，暂时降级到Tailwind v3稳定版（如3.4.1），同步更新@tailwindcss/postcss对应版本
• 清理依赖缓存：执行以下命令清理缓存后重新安装依赖：

  pnpm cache clean
  rm -rf .next node_modules
  pnpm install
  

• 排查MDX与样式代码：检查项目中MDX文件的内联样式、代码块样式，以及自定义CSS文件，确认是否有异常代码导致生成的CSS格式错误

内容的提问来源于stack exchange，提问作者Sintu Boro