webpacknext.js

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/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

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.