Mini-css-extract-plugin: 0.6.0 reloading stylesheets is not working anymore

[birkir]

Hey, took me a while to figure out what was causing this.

I have the following stack

• [email protected]
• @zeit/[email protected]

The following config:

const sass = require('@zeit/next-sass');

[sass, {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  },
}]

The Problem
The project is reporting in the chrome console (and this is normal and hasn't caused any issues before)

Conflicting order between:

• css ./node_modules/css-loader??ref--10-3!./node_modules/postcss-loader/src??ref--10-4!./node_modules/sass-loader/lib/loader.js??ref--10-5!./src/components/container/Container.scss
• css ./node_modules/css-loader??ref--10-3!./node_modules/postcss-loader/src??ref--10-4!./node_modules/sass-loader/lib/loader.js??ref--10-5!./src/components/card/Card.scss

BUT

1. When changing route
2. Most of the components on the new page will be unstyled unless I hard-reload the page.

Looks like the styles are not injected into the head

Solution

When I downgraded to 0.5.0 I get the same flash of some unstyled components on route change and the following message from webpack:

[HMR] Reloading stylesheets...

Following by a correct CSS render.

---

I will attempt to make a repro with vanilla webpack setup, but until then, this issue can serve as a placeholder.

[alexander-akait]

Are you sure you are in right repo? Since 0.6.0 hmr was implemented, looks you have invalid configuration. 0.5.0 doesn't support hmr so i can't understand problem.

[alexander-akait]

Please create minimum reproducible test repo

[birkir]

Yes, I think the problem is, by supporting HMR of styles, issues like the "conflict" will cause styles not to render.

Yes, I will. It's hard to create repro that causes conflicting styles. Figuring out how to do it.

[alexander-akait]

/cc @ScriptedAlchemy

[ScriptedAlchemy]

Yeah please create a repo so we can debug this.

It's very hard to debug issues without an example of the problem :)

[birkir]

Repro: https://github.com/birkir/mcep-next-repro

[ScriptedAlchemy]

Awesome, I’ve got an event this evening but will dig into the problem this weekend

[ScriptedAlchemy]

Okay on my phone I quickly had a look, did HMR work previously via next? If so then there might be some conflict between how they HMR and how we do.

Okay after looking into next css, plugin https://github.com/zeit/next-plugins/blob/master/packages/next-css/css-loader-config.js

It appears it might be using my extract css chunks plugin under the hood.

I’ll likely need to touch base with the authors and open PRs on that side. Will keep you posted

[alexander-akait]

@birkir can you test again with 0.7.0 version?

[alexander-akait]

/cc @ScriptedAlchemy friendly ping

[ScriptedAlchemy]

Thanks, For the ping! Will set a reminder to check this

[birkir]

Still the same issue. I traced it to this issue as well: https://github.com/sheerun/extracted-loader/issues/11

I am not sure which one is at fault or if it is a cause of multiple packages not working together.

[alexander-akait]

Unfortunately, we cannot solve this problem on our side, zeit should migrate on hmr code of this plugin (maybe they already done this), other loader should implement own hot interface