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

[coderrshyam]

Link to the code that reproduces this issue

https://github.com/coderrshyam/next.js-hook-webpack-error

To Reproduce

1. Clone the repository: https://github.com/coderrshyam/next.js-hook-webpack-error

  git clone https://github.com/coderrshyam/next.js-hook-webpack-error.git
  cd next.js-hook-webpack-error

2. Install the dependencies:

  pnpm install

3. Attempt to build the project:

  pnpm build

4. Observe the build failure with the HookWebpackError and TypeError as described in the "Actual behavior" section.

Current vs. Expected behavior

The build process should complete successfully, processing and optimizing all CSS files without errors.

VS

The build fails with a HookWebpackError. The error message indicates that there's an attempt to read the '0' property of an undefined value during CSS processing. This occurs in the cssnano-simple plugin, which is used by Next.js for CSS optimization.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 16069
  Available CPU cores: 12
Binaries:
  Node: 22.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.4.0
Relevant Packages:
  next: 15.1.7 // Latest available version is detected (15.1.7).
  eslint-config-next: 15.1.7
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
  tailwindcss: 4.0.6
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS, Webpack

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

During the build process of a Next.js application (version 15.1.7), a HookWebpackError occurs, specifically a TypeError stating "Cannot read properties of undefined (reading '0')". This error seems to be related to CSS processing, possibly during the minification step using cssnano-simple.

[samcx]

@coderrshyam Thank you for submitting an issue!

Hmm it looks like it is something with the syntax in syntax.css 👀

[coderrshyam]

I carefully review my css but not find any css syntax error

[Vahor]

I had the same issue and the root cause was one css line with *=" "

code[data-theme*=" "],
code[data-theme*=" "] span {
  ...
}

if I change the value " " to anything else, it works.

As you also have some of these selectors https://github.com/coderrshyam/next.js-hook-webpack-error/blob/f46b84cf07626ffd277ad921afe2def1da78cbb4/src/app/syntax.css#L64
this might be your issue

[coderrshyam]

I had the same issue and the root cause was one css line with *=" "

code[data-theme*=" "],
code[data-theme*=" "] span {
  ...
}

if I change the value " " to anything else, it works.

As you also have some of these selectors https://github.com/coderrshyam/next.js-hook-webpack-error/blob/f46b84cf07626ffd277ad921afe2def1da78cbb4/src/app/syntax.css#L64 this might be your issue

Thanks! It's work but it is still issue with *=" "