Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix CSS `url()` imports resolve incorrectly when using matchResource (`!=!`) with `mini-css-extract-plugin` [1 pull requests, 1 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#91984•Fetched 2026-04-08 01:40:12
View on GitHub
Comments
0
Participants
1
Timeline
3
Reactions
1
Author
Mad-KatMad-Kat
Participants
Mad-KatMad-Kat
Timeline (top)
cross-referenced ×1issue_type_added ×1labeled ×1

Fix Action

Fixed

PR fix notes

PR #91985: Update mini-css-extract-plugin to 2.10.2

Description (problem / solution / changelog)

What?

Update bundled mini-css-extract-plugin from v2.4.4 to v2.10.2

Why?

mini-css-extract-plugin's importModule does not use matchResource when available, causing CSS url() imports to resolve against the wrong context when a loader uses !=! (matchResource) syntax to emit CSS.

Fixed upstream in webpack-contrib/mini-css-extract-plugin#1162.

How?

  • Updated the dependency version in packages/next/package.json
  • Recompiled the bundled output in src/compiled/mini-css-extract-plugin/
  • Removed cjs.js and hmr/ directory (no longer needed in v2.10+)
  • Added an ncc compilation step in taskfile.js for the top-level hotModuleReplacement.js (v2.10+ loader references it from __dirname directly instead of hmr/)

Fixes #91984

Changed files

  • packages/next/package.json (modified, +1/-1)
  • packages/next/src/compiled/mini-css-extract-plugin/cjs.js (removed, +0/-1)
  • packages/next/src/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js (removed, +0/-1)
  • packages/next/src/compiled/mini-css-extract-plugin/hotModuleReplacement.js (added, +1/-0)
  • packages/next/src/compiled/mini-css-extract-plugin/index.js (modified, +1/-1)
  • packages/next/src/compiled/mini-css-extract-plugin/loader.js (modified, +1/-1)
  • packages/next/src/compiled/mini-css-extract-plugin/package.json (modified, +1/-1)
  • packages/next/taskfile.js (modified, +13/-12)
  • pnpm-lock.yaml (modified, +7/-6)

Code Example

N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/DigitecGalaxus/next-yak/pull/515

To Reproduce

  1. Create a webpack loader that uses matchResource (!=!) syntax to emit CSS through mini-css-extract-plugin
  2. Include a CSS url() reference to a relative asset (e.g. url(./image.png))
  3. Build with next build --webpack
  4. The url() path resolves against the wrong directory, resulting in broken asset references

Current vs. Expected behavior

Current: mini-css-extract-plugin's importModule ignores the matchResource from !=! requests, causing CSS url() imports to resolve against the original file's context instead of the matchResource path.

Expected: importModule should use the matchResource path for resolution, matching how webpack handles !=! requests elsewhere.

Fixed upstream in webpack-contrib/mini-css-extract-plugin#1162 (v2.10.2).

Provide environment information

N/A

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

Webpack

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

next build (local), next dev (local)

Additional context

The bundled mini-css-extract-plugin is at v2.4.4. The fix landed in v2.10.2. This blocks any webpack loader using matchResource to emit CSS with relative url() references.

A PR to update the bundled version will follow.

extent analysis

Fix Plan

To fix the issue with mini-css-extract-plugin, we need to update the bundled version to at least v2.10.2. Here are the steps:

  • Update mini-css-extract-plugin to v2.10.2 or later in your project's package.json:
"dependencies": {
  "mini-css-extract-plugin": "^2.10.2"
}
  • Run npm install or yarn install to update the dependency.
  • Verify that the mini-css-extract-plugin version is updated by checking the node_modules directory or running npm ls mini-css-extract-plugin.

Verification

To verify that the fix worked, follow these steps:

  • Run next build --webpack to rebuild your project.
  • Check the generated CSS files for correct url() references.
  • Verify that the relative asset paths are resolved correctly.

Extra Tips

  • Make sure to update the mini-css-extract-plugin version in your project's package.json to ensure that the fix is persisted across deployments.
  • If you're using a monorepo or a complex project structure, ensure that the updated mini-css-extract-plugin version is used across all relevant packages.

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…
#dependency error#configuration error#environment variable#network issue#logging 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