astroturf icon indicating copy to clipboard operation
astroturf copied to clipboard

prevents js updates with mini-css-extract-plugin and HMR

Open cahnory opened this issue 4 years ago • 0 comments

  • Operating System: macOS Catalina
  • Node: 12.10.0
  • Webpack: 5.20.0
  • Astroturf: 1.0.0-beta.16
  • mini-css-extract-plugin: 1.3.2

First, I'm not sure that astroturf is the root of the issue or just a trigger as both Astroturf and mini-css-extract-plugin seem to work independently. I can make a repro repos but as I know not all known issue with v1 are listed, I didn't want to make it before I'm sure it's a new one.

Actual Behavior

My React component is not always updated by HMR when the file contains astroturf css.

Expected behavior

My React component should always be updated by HMR.

Observations

  • the style seems to always be updated
  • when a javascript file importing css file changes, HMR has a single module to update (the js):
    ["3027"]
  • when a javascript file containing astroturf css changes, HMR has two modules to update (the generated css and the js even if the css didn't change):
    ["194", 3027]
  • it seems that when my component is updated (I see the changes in the browser), the two module update (css, js modules ids) is preceded by a single module update (js module id):
    ["3027"] then ["194", 3027]
  • when there is a two module update (astroturf css and the js declaring it), the js module id is a number and not a string (see above)
  • using HashedModuleIdsPlugin to only have string id didn't fix anything

cahnory avatar Feb 04 '21 12:02 cahnory