ExtractCSS rule breaks HMR and SourceMaps

[AndrewBogdanovTSS]

Reproduction link

https://codesandbox.io/s/w08yyp72zk

How to reproduce

Try to change the color of the title without a page refresh

Expected behavior

1. Page CSS is re-rendered dynamically without a need for a page refresh
2. Sourcemaps points to the correct file

Actual behavior

1. CSS changes appear only after full page refresh
2. CSS Sourcemaps point to generated css files - not on components it was initially written in

Related issues

nuxt/nuxt#5390

[ScriptedAlchemy]

Upgrade to latest? This was fixed in 4.1

[TheAlexLichter]

@ScriptedAlchemy Still does not work according to nuxt/nuxt#5390 (comment)

[AndrewBogdanovTSS]

Yes, I explicitly tried it with v.2.4.0 before logging this bug

[ScriptedAlchemy]

Should be resolved.

[TheAlexLichter]

@ScriptedAlchemy has the fix already been released? 🤔

[AndrewBogdanovTSS]

@ScriptedAlchemy @manniL I tried it with Nuxt 2.6.1 and extract-css-chunks-webpack-plugin 4.3.0, but still, when I specify extractCSS: true, I get files extracted in Dev mode as if I were running Production build http://take.ms/5fySF thus hot reload is not working as well as sourcemaps are pointing to those extracted files instead of pointing to Vue files.
So the only way I can handle it right now is by specifying this workaround nuxt/nuxt#5390 (comment)

[ScriptedAlchemy]

try it with reloadAll:true option and hot:true if someone gives me a repo ill take a look -- seems like a nuxt issue tho....

[TheAlexLichter]

@ScriptedAlchemy CodeSandbox is here: https://codesandbox.io/s/w08yyp72zk ☺️

[aga5tya]

Any luck with this? Seems the case with razzle builds too on dev.

[ScriptedAlchemy]

Not really sure what I'm looking at or how to use a code sandbox.

If i can get a real repo then i might be able to look into the problem. TBH it would be great if there was some debugging done on this.

I'll likely not fix this till it becomes a problem for me - too many larger projects on the go right now and not enough time to debug the code.

Find me the line and ill write the fix.

Alternatively, can you roll back to like version 2 or 3?

[TheAlexLichter]

Reproduction link

https://github.com/manniL/nuxt-extractcss-breaks-hmr-in-dev/tree/master/ ( credits to @AndrewBogdanovTSS )

Steps to reproduce

1. Clone repo and install dependencies)
2. Run nuxt in dev mode (extractCSS is already enabled https://github.com/manniL/nuxt-extractcss-breaks-hmr-in-dev/blob/master/nuxt.config.js#L54 )
3. Try to update css/scss inside of the component

What is expected ?

1. Page CSS is re-rendered dynamically without a need for a page refresh
2. Sourcemaps point to the correct file

What is actually happening?

1. CSS changes appear only after full page refresh - HMR is broken
2. CSS Sourcemaps point to generated css files - not on components it was initially written

---

Sad to hear that this issue has low priority as it defeats a large benefit that this plugin brings compared to mini-css-extract-plugin, which is HMR. IMO this is at least medium priority.

(I totally understand that you have other projects to manage and don't want to say that you have to dedicate time or similar, don't get me wrong there ☺️)

If you tell me how to debug the issue I'm happy to invest time but I'm fairly new to webpack plugins 🙈

[7iomka]

any news on this issue?
I have used extract-text-webpack-plugin in webpack 3, and when I moved to webpack 4, with css-mini alternative I have the same problems with full page reload (I not use hmr, just browsersync) in comparation with extract-text-webpack-plugin that has no full page reload when I make changes in style files.
Maybe that is happens because with css chanks is emitted js chunks?
Sorry for my english without google translate)

[ScriptedAlchemy]

@manniL for the record, we have merged with mini-css

I maintain both codebases now. Also, are you using CSS modules or standardized CSS files? (do you use reloadAll)

[ghost]

I've disabled the plugin in dev because of this. Please prioritize! :)
If someone can point me in the general direction of the source of the error, I might even take a look at it myself.

[ScriptedAlchemy]

Okay okay. I’ll take another look at the repo links

[usb248]

When it will be fixed ? i need to press F5 at each change in my styl files ... :'(

[TheAlexLichter]

@ScriptedAlchemy Thanks for the update and for taking another look!

We add the plugin here https://github.com/nuxt/nuxt.js/blob/ab72355669243c128c9eadc41503a8d6520b928c/packages/webpack/src/config/base.js#L364-L368

and the loader here https://github.com/nuxt/nuxt.js/blob/840ccb4bdfa3751217a7b41726b3e8f11db229bb/packages/webpack/src/utils/style-loader.js#L85-L95

We use reloadAll but not hmr.

[ScriptedAlchemy]

You need to use reloadAll and hot:true

Hot:true enables HMR, reloadAll is a additional step as some users struggle to get HMR to work in all scenarios

[ScriptedAlchemy]

use: [
           {
             loader:ExtractCssChunks.loader,
             options: {
               hot: true,
               reloadAll: true, // when desperation kicks in - this is a brute force HMR flag
             }
           },
           "css-loader"
         ]

[TheAlexLichter]

@ScriptedAlchemy Thanks! This worked well ☺️ nuxt/nuxt#5906 fixed our issues as far as I've tested locally

[ScriptedAlchemy]

Booya 🔥 my work here is done ✅

Tag me if there’s any further assistance needed. I’ll likely run another update to fix some possible load order issues. (Next week)

There’s a bug if you try to hmr base64 link tags that also is being addressed:)

[fivethreeo]

webpack-contrib/mini-css-extract-plugin#487