Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

CSS Chunk not hot reloading with Webpack 4

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:1
Comments:15

Top GitHub Comments

1reaction

ScriptedAlchemycommented, Jul 10, 2018

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

1reaction

sjwood25890commented, Jul 10, 2018

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.

Top Results From Across the Web

Hot Module Replacement - webpack

Hot Module Replacement (or HMR) is one of the most useful features offered by webpack. It allows all kinds of modules to be...

webpack 5 does not HMR (hot reload) on style changes

Here is the devServer's settings, which worked for me: devServer: { port: 8080, hot: "only", static: { directory: path.join(__dirname, '.

Webpack's Hot Module Replacement Feature Explained

Developing a JavaScript application involves reloading the browser each time you save code changes in order to refresh the user interface.

extract-css-chunks-webpack-plugin Code Examples - Snyk

resolve(app_root, 'src'), // Global stylesheets in the static directory do not generate modules path.resolve(project_root, 'static'), ], use: [ // When ...

mini-css-extract-plugin - npm

⚠️ Note that if you import CSS from your webpack entrypoint or import styles in the initial chunk, mini-css-extract-plugin will not load this ......