Incompatibility with the latest version of mini-css-extract-plugin (0.4.3)

[Lyrkan]

Hi there,

It seems that there is an issue when using the latest versions of the mini-css-extract-plugin and this plugin together.

We have a test case in Webpack Encore with the following stylesheet:

// roboto_font.css
@font-face {
    font-family: 'Roboto';
    src: url('./../fonts/Roboto.woff2') format('woff2');
}

When we require that file with [email protected] everything works as intended, however with [email protected] we get the following manifest (don't mind the other entries):

{
	"build/bg.css": "/build/bg.css",
	"build/font.css": "/build/font.css",
	"build/main.js": "/build/main.js",
	"build/runtime.js": "/build/runtime.js",
	"build/images/another_bg_image.css": "/build/images/symfony_logo.ea1ca6f7.png",
	"build/fonts/roboto_font.css": "/build/fonts/Roboto.9896f773.woff2"
}

As you can see, instead of having a "build/fonts/Roboto.woff2" key, we get "build/fonts/roboto_font.css"... which doesn't feel right at all :)

I tracked down the issue to this PR: webpack-contrib/mini-css-extract-plugin#177 (comment)

Apparently webpack-assets-manifest was also affected and managed to solve it (webdeveric/webpack-assets-manifest#39).

[karlvr]

I've just come across this issue. It appears to be caused because the mini-css-extract-plugin (I didn't establish it conclusively as the source, but it seems like it) is causing our moduleAsset function to be called a second time for a given static asset (e.g. background.png) but with module.userRequest set to the CSS source file. So we end up mapping background.png to main.css and then in our manifest end up with "main.css": "background.HASH.png" in our manifest. Of course because we can only have one key for "main.css", but there are likely multiple assets referenced by it, we also lose any mention of lots of our assets.

The solution in
webdeveric/webpack-assets-manifest#39 looks like it might actually be just because they check that they haven't already got a mapping for the file before adding it.

A similar, but simpler change works here if we add to the moduleAsset function a check that moduleAssets[file] is not already set. Is it safe to assume that the first time we hear about an asset, it's always the asset itself, and that the CSS referencing the asset will always follow...?

[fernandopasik]

The current workaround for this is to force the dependency to 0.4.2 through yarn resolutions.

[electrocnic]

The current workaround for this is to force the dependency to 0.4.2 through yarn resolutions.

This did not help in my case :(
Using "mini-css-extract-plugin": "^0.5.0",

[a573367014]

目前的解决方法是通过纱线分辨率强制依赖性为0.4.2。

这对我的情况没有帮助:(
使用“mini-css-extract-plugin”：“^ 0.5.0”，

me too

[fernandopasik]

I mean in package.json have a resolutions key (this only works with yarn, not supported by npm)

{
  "devDependencies": {
    "mini-css-extract-plugin": "^0.4.2"
  },
  "resolutions": {
     "mini-css-extract-plugin": "0.4.2"
  }
}

for npm I guess you can force the version and that's it

{
  "devDependencies": {
    "mini-css-extract-plugin": "0.4.2"
  }
}

[harryfinn]

Thanks @fernandopasik, reverting to 0.4.2 fixed an issue in my webpack build whereby in development mode, font assets were removed after first rebuild and not being saved in the manifest correctly!

[hershmire]

Are there any plans for webpack-manifest-plugin to have a permanent fix?

[mauricesnip]

I'm having this issue with 2.0.4 in combination with mini-css-extract-plugin 0.7.0 and 0.8.0. Indeed, reverting to [email protected] fixes this. Did anyone manage to get this to work with the recent versions of mini-css-extract-plugin?

[TheDutchCoder]

I can confirm this issue.

it also happens with PostCSS and ExtractCssPlugin, where (for example) fonts end up as a single entry like this:

"fonts/app.pcss": "/static/redesign/fonts/Nimbus-Sans-Novus-Semibold.woff",

Both the key and value make no sense.

[mastilver]

#176 is available on 3.0.0-rc.0

[pascalw]

I was running into this issue and can confirm that 3.0.0-rc.0 solves it.

[alex996]

Unfortunately, the issue still occurs with the current mini-css-extract-plugin (v1.3.1). I've put up a minimal repro in this repository, but in short, the plugin emits incorrect keys for CSS files, for example:

{
  "main.css": "style.b248c6e8f370b3bc8646.css", // <--- key should be "style.css"
  "main.js": "main.3cf1156c43d58afb8952.js"
}

@shellscape Thanks in advance to your attention; I can create a separate issue if need be.

[shellscape]

@alex996 This is a webpack v5 issue. See #222

[shellscape]

v3.0.0 is published and should resolve this issue.