HookWebpackError: Cannot read properties of undefined (reading '0')

Can somebody tell me why am I having this issue while running pnpm run build. This is a Next.js project.

My 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"
  }
}

Error I'm having while running the build script. Dev script is working fine.

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/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:28:312635)
    at /Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/webpack/bundle5.js:28:106060
    at eval (eval at create (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/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/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79568)
    at Parser.parse (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93417)
    at Parser.loop (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93089)
    at new Parser (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79163)
    at Processor._root (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96105)
    at Processor._runSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96612)
    at Processor.processSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:97367)
    at /Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:36530
    at Array.every (<anonymous>)
    at ensureCompatibility (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/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/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79568)
    at Parser.parse (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93417)
    at Parser.loop (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:93089)
    at new Parser (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:79163)
    at Processor._root (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96105)
    at Processor._runSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:96612)
    at Processor.processSync (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:97367)
    at /Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:36530
    at Array.every (<anonymous>)
    at ensureCompatibility (/Users/sintuboro/Desktop/boroblog/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/compiled/cssnano-simple/index.js:190:35918)


> Build failed because of webpack errors

I have gone through all the directories to see what I'm missing but doesn't look like any of my project files has issues. Not sure why the build is not working.

Solution

I found the fix! The issue was with the CSS:

@media (prefers-color-scheme: light) {
  code[data-theme*=" "],
  code[data-theme*=" "] span {
    color: var(--shiki-light);
    background-color: var(--shiki-light-bg);
  }
}

@media (prefers-color-scheme: dark) {
  code[data-theme*=" "],
  code[data-theme*=" "] span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }
}

as detailed in this rehype-pretty-code blog post.

However, the correct CSS should be:

@media (prefers-color-scheme: dark) {
  pre code[data-theme],
  pre code[data-theme] span {
    color: var(--shiki-dark);
  }
}

@media (prefers-color-scheme: light) {
  pre code[data-theme],
  pre code[data-theme] span {
    color: var(--shiki-light);
  }
}

This change ensures that the correct theme is applied based on the user's color scheme preference without next build error.