CSS Chunk not hot reloading with Webpack 4

[sjwood25890]

As was partly reported in #75, with Webpack 4 CSS chunks loaded with react-universal-component are not being hot reloaded correctly for me. That issue was closed so I wanted to restart the conversation here.

The hot reload is being accepted by the client but the main.css file is being reloaded instead of the specific CSS chunk. In my fork of the Universal Demo for Webpack 4, when I change an async component's CSS the console shows:

[HMR] Updated modules:
process-update.js:116 [HMR] - ./src/css/Foo.styl
process-update.js:121 [HMR] App is up to date.
hotModuleReplacement.js:119 [HMR] css reload http://localhost:3000/static/main.css

I'm expecting that it should reload http://localhost:3000/static/components-Foo.css.

Versions:
node 10.2.1
react-universal-component 3.0.0-alpha.2
webpack-flush-chunks 2.0.1
extract-css-chunks-webpack-plugin 3.0.5

Project showing behavior:
https://github.com/sjwood25890/universal-demo/tree/webpack-4-RUC-3

FWIW, digging around in hotModuleReplacement.js shows me that getCurrentScriptUrl is always returning the main.js file instead of the chunk's JS file. If I force a reloadAll() on every CSS hot update I get the desired result on the client, which is obviously not the ideal way to do this, but does make me think the issue is in identifying which CSS file to reload in hotModuleReplacement.js.

[dcousineau]

I'm also having a similar issue. I'm not using universal and I'm using splitChunks cacheGroups to combine my CSS into a single file:

      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        },
      },

But otherwise have hot reloading turned on and ready to go:

    new ExtractCssChunks({
      filename: 'css/[name].css',
      chunkFilename: 'css/[id].chunk.css',
      hot: true,
    }),

I am also using CSS modules with postcss but I don't think that would affect anything?

[ScriptedAlchemy]

Relocating to the west coast. Should be able to pick things up properly after the 4th :)

[dcousineau]

Congrats on the move! I’ve got my system nominally working and have backup plans (re-introducing style-loader in dev mode) for the mean time. Can’t speak to op though obviously.

[ScriptedAlchemy]

Okay good I’m glad you are sorted for the time being. Thanks for posting a repo example, I’ll definitely check it. Thanks man, it’s been a loooong drive 😂

[sjwood25890]

Welcome to the west coast @ScriptedAlchemy! I haven't had a chance to look into this further with the break but should be able to get to it soon. Let me know if there's any more info I can provide to help out.

[ScriptedAlchemy]

Pulling this repo down today, running on a 4G link so capacity is still heavily diminished. Ill see if i can find the issue today though :)

[ScriptedAlchemy]

Okay, so, for my own sanity.. I pulled up some of my own infra and flipped them over to CSS modules. Which seems to work flawlessly. So while this issue is definitely real and reproducible. It might be configuration related. Ill need some more time to debug this demo and see whats gone off.

Only difference is im using SCSS

[ScriptedAlchemy]

While mine works, Its also a extremely complicated setup.
What im going to do is debug the plugin and see if theres a solution I can just deliver built-in.

[sjwood25890]

Sounds good. FWIW, I have another project going where I am using SCSS and CSS modules and this behavior still shows up.

[ScriptedAlchemy]

@sjwood25890 okay, ive got the biggest hack ever, buuuuut - for today, it will get everyone back on their feet. Im gonna publish a beta of it and we will see how goes

[ScriptedAlchemy]

Now available on npm extract-css-chunks-webpack-plugin@next

Let me know if it solves the immediate issue. Ill continue to investigate better solutions

If you can test it tomorrow, ill merge: https://github.com/faceyspacey/extract-css-chunks-webpack-plugin/pull/82/files

[ScriptedAlchemy]

@sjwood25890 Had a chance to test it on your side?

[sjwood25890]

@ScriptedAlchemy just got to it, but yes that provide a workaround for now. Thanks!

[ScriptedAlchemy]

Perfect! thank you. Ill merge this and re-write HMR when i can

[szegheo]

@ScriptedAlchemy I still have this problem, even on 3.1.2-beta.6. Although I know my config is a bit unusual. I have only one entry point defined however with extract-css-chunks-webpack-plugin and SplitChunksPlugin Webpack generates 4 files (index.js, index.css, vendors.js, vendors.css) using this way:

entry: {
  index: path.resolve(paths.src, "index.js")
}

optimization: {
  runtimeChunk: {
    name: "vendors"
  },
  splitChunks: {
    chunks: 'all',
    name: 'vendors',
    cacheGroups: {
      vendorStyles: {
        name: "vendors",
        test: path.resolve(paths.src, "sass/vendors.scss"),
        chunks: "all",
        enforce: true
      }
    }
  }
}

my index.js (entry point) is nothing more than:

require('./js/vendors');
require('./js/site');

and the end of js/vendors.js (after importing packages from node modules):

import '../sass/vendors.scss';

if (module.hot) {
    module.hot.accept('../sass/vendors.scss', function(){
        console.log('VENDORS.CSS ACCEPTED');
    });
}

When I modify any .scss file not related to vendors.scss then all is ok, hmr works as excepted. But when I modify something inside vendors.css the output is this:

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
VENDORS.CSS ACCEPTED
[HMR] Updated modules:
[HMR]  - ./resources/assets/sass/vendors.scss
[HMR] App is up to date.
[HMR] css reload http://localhost:8080/build/index.css

.. and in the browser index.css gets updated instead of vendors.css

Tested with latest Webpack 4.20.2, and the plugin with 3.1.1 and 3.1.2-beta.6