Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Bug: CSS minification error in [email protected] via CssMinimizerPlugin [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#91551•Fetched 2026-04-08 00:57:06
View on GitHub
Comments
1
Participants
2
Timeline
3
Reactions
0
Author
kelieCnkelieCn
Participants
icyJosephicyJosephkelieCnkelieCn
Timeline (top)
commented ×1issue_type_added ×1labeled ×1

Code Example

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 14.2.35 // An outdated version detected (latest is 16.1.7), upgrade is highly recommended!
  eslint-config-next: 15.5.7
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.8.3
Next.js Config:
  output: export
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/quirky-panna-2m23xd

To Reproduce

This issue only persists in production builds (next build) and does not appear in development mode.

  1. Run pnpm build to bundle the application for production.
  2. Inspect the generated .css file in the .next/static/css/ directory.
  3. Search for classes like .x:max-xl:hidden or .x:max-lg:block

Current vs. Expected behavior

This project imports the nextra-theme-docs/style.css file in /app/layout.tsx. There are some styles in this style file (such as: .x:max-xl:hidden, .x:max-lg:block, etc.), but in the css file of the packaged file, the styles of these class names have changed.

Expected Behavior

<img width="444" height="856" alt="Image" src="https://github.com/user-attachments/assets/7d368b3c-b48d-46ed-b9b9-60a0cb852efb" />

Actual Behavior

<img width="432" height="315" alt="Image" src="https://github.com/user-attachments/assets/e1138e82-e90a-4b11-9faa-4caab8a4ace8" />

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 14.2.35 // An outdated version detected (latest is 16.1.7), upgrade is highly recommended!
  eslint-config-next: 15.5.7
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.8.3
Next.js Config:
  output: export

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

CSS

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

next build (local)

Additional context

Currently, I have resolved this issue by manually overriding the built-in CssMinimizerPlugin in next.config.js and replacing it with a fresh instance of css-minimizer-webpack-plugin.

<img width="846" height="270" alt="Image" src="https://github.com/user-attachments/assets/0807b7ae-0720-4085-9d1d-15152753dade" />

extent analysis

Fix Plan

To fix the issue with CSS class names being modified in production builds, we need to override the default CssMinimizerPlugin in next.config.js. Here are the steps:

  • Install the css-minimizer-webpack-plugin package if you haven't already:
pnpm install css-minimizer-webpack-plugin --save-dev
  • In next.config.js, add the following code to override the default CssMinimizerPlugin:
const { CssMinimizerPlugin } = require('css-minimizer-webpack-plugin');

module.exports = {
  // ... other configurations ...
  future: {
    webpack

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#ssr#installation#tensor shape#autograd error#environment variable#network issue#logging issue#authentication issue#prompt issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING