Cannot handle css-loader error

[AndreasCag]

• Operating System: MacOS High Sierra 10.13.6
• Node Version: 9.7.1
• NPM Version: 6.0.1
• webpack Version: 4.19.1
• webpack-hot-middleware Version: 2.24.0

Description

I use css-loader with enabled modules option. When I add any new css rule css-loader throw error:

Error: Aborting CSS HMR due to changed css-modules locals.

In that case I want to reload page, but webpack-hot-widdleware ignores any errors and I'm not able to handle errors and reload page.

Reproduction

https://github.com/AndreasCag/hot-reload-bug-repro

How Do We Reproduce?

1. Download repro
2. Install dependencies npm i
3. Run dev server npm run dev
4. Open browser with url localhost:3000
5. Open browser console
6. Go to file ./src/test.css and add the following rule at the end of file

.test-3 {
    font-size: 33px;
}

7. Go to browser and check out console

Actual behaviour

Expected behaviour

Page automatically reloaded

[glenjamin]

Hrm, i thought there was a way to customise the process-update behaviour and the arguments passed to module.hot.apply, but it doesn't look like that was ever introduced.

The code was last touched in https://github.com/webpack-contrib/webpack-hot-middleware/pull/254 The arguments we pass to the hot reloading API look to be the same as what webpack core uses: https://github.com/webpack/webpack/blob/master/hot/only-dev-server.js#L25-L55

Is there a way to configure CSS loader to not error in that scenario?

[AndreasCag]

There is my small mistake, error is emitted by style-loader https://github.com/webpack-contrib/style-loader/blob/fc24512b395a8a3fd4074d88cd3f7b195f0bcef2/index.js#L59

Suddenly there is no way to customize style-loader hmr behavior.

Right now I implement console.error wrapper to handle this error

const consoleErrorMethod = console.error;

console.error = (...args: any[]) => {
  if (
    typeof args[0] === 'object' 
    && args[0]
      .toString()
      .startsWith('Error: Aborting CSS HMR due to changed css-modules locals')
  ) {
    window.location.reload();
  }

  consoleErrorMethod.apply(console, args);
};

By I feel a bit uncomfortable with this solution.

[AndreasCag]

Note: webpack-dev-server refresh page when I add new css rule

[AndreasCag]

@glenjamin To solve this problem the following options should be customizable?

ignoreUnaccepted: true,
ignoreDeclined: true,
ignoreErrored: true,

I believe I can make a PR on this weekend for this capabilities.

[glenjamin]

I think it might be a bit more complicated than that to get the behaviour correct.

I think perhaps the right logic might be to not ignore if reload is true.