Wrong CSS Chunk Reloading in Webpack 4

[ithinkdancan]

I'm using the latest version of this plugin (3.0.5) along with WebPack 4 and react-univeral-component, however whenever i try and update a chunked scss in dev file it detects the file that changed but still reloads just the main.scss file. any idea what could be causing this?

Console

[HMR] Updated modules:
process-update.js?57b3:116 
[HMR]  - ./app/pages/HomePage/HomePage.scss
process-update.js?57b3:121 
[HMR] App is up to date.
hotModuleReplacement.js?386e:119 
[HMR] css reload http://localhost:9116/static/main.css

HomePage:

import React from 'react';

import './HomePage.scss';

export default function HomePage() {
	return (
		<div className="home-page">
			HomePage!
		</div>
	);
}

Application:

import React from 'react';
import { hot } from 'react-hot-loader';
import universal from 'react-universal-component';

const HomePage = universal(() => import('../../pages/HomePage/HomePage'));

export function ApplicationWrapper() {
	return (
		<div>
			<HomePage />
		</div>
	);
}

export default hot(module)(ApplicationWrapper);

[ithinkdancan]

rolled everything back to webpack3 spec and things worked as expected. would be awesome to see the demo upgraded to webpack 4. https://github.com/faceyspacey/universal-demo

[ScriptedAlchemy]

I’m working on the universal demo

[mpospelov]

Hi, I faced exactly the same issue.
Seems like hash is not calculated properly for the updated CSS file

[ScriptedAlchemy]

Don’t use hashing with HMR. If you are, which it sounds like you might me

[mpospelov]

I'm actually not familiar with internals, so we might talk about different hashes.
I just went throw the code with the debugger and found that upToDate() call in webpack hot middleware always returns true for this updated CSS chunk. upToDate checks if a new hash equals last saved hash if not it tries to upload new hot chunk, BUT it might not be an issue for this case 😃

As a temporary solution, I turn off the reloaded check in the hotModuleReplacement file like this.

    // const src = getScriptSrc(options.fileMap);
    // const reloaded = reloadStyle(src);
    // if (reloaded) {
    //   console.log('[HMR] css reload %s', src.join(' ')); // eslint-disable-line no-console
    // } else {
      console.log('[HMR] Reload all css'); // eslint-disable-line no-console
      reloadAll();
    // }

it at least working 👐

the problem here is that getScriptSrc(options.fileMap) returns main.css file but it's not a parent of updated CSS chunk, I believe that getScriptSrc should return universal component parent, so I think that might be the issue.

For better understanding here is the rough component tree:

AppContainer(with main.css)
  -> UniversalComponentContainer(with it's UniversalComponentContainer.css chunk)
     -> DumpComponent(with its DumpComponent.css chunk)

I updating DumpComponent.css and the output is the same as in the first comment

[HMR] Updated modules:
process-update.js
[HMR]  - ../DumpComponent.css
process-update.js
[HMR] App is up to date.
hotModuleReplacement.js
[HMR] css reload .../main.css

But I think in the end HMR should reload UniversalComponentContainer.css instead of main.css

Any thought on that issue?

[ithinkdancan]

So sounds like different issues but the problem that spawned this ticket was not splitting out common chunks and only have entry and split chunks so the JS could load Async and the JS not loading in the right order to register with webpack properly.

I got around this by only loading the main bundle and then using the preload function in universal react component to register bundles before rendering my app

Promise.all(splitPoints.map((chunk) => Bundles[chunk].preload())).then(() => render(App));