-
-
Notifications
You must be signed in to change notification settings - Fork 208
Description
Bug report
Actual Behavior
If you make an edit to an @import-ed CSS file that results in an error (e.g. invalid CSS), webpack hot reloader no longer detects further changes in that file - even if you correct or undo the edit (CTRL-Z). You need to restart webpack for it to start detecting the file again.
This is only in the specific scenario of a breaking change. Any valid change continues to be detected by hot reloading.
This is also specific to only @import-ed files. Any change to a top-level file that is not imported by another CSS file continues work with hot reloading.
Expected Behavior
Webpack Hot Reloader should continue detecting updates to the previously edited file. If the error is corrected, it should recompile and emit the successful file.
How Do We Reproduce?
Here is a repository to reproduce it: https://github.com/abhchand/webpack-postcss-hmr-issue-reproduction. This repo uses postcss to run Tailwind CSS.
- Clone the repo
- Run
yarn install, thenyarn run start - Open http://localhost:3035/
You'll notice there are 2 CSS files - main.css and imported.css. The second one is @import-ed by the first.
You can reproduce the following scenarios:
| action | result |
|---|---|
In main.css, make some breaking change (e.g. change tw:h-9 to tw-h-9) |
🟢 Hot reloading should detect the change and present the error |
In main.css, correct the above breaking change |
🟢 Hot reloading should detect the change and rebuild the file |
In imported.css, make some breaking change (e.g. change tw:border-green-500 to tw-border-green-500) |
🟢 Hot reloading should detect the change and present the error |
In imported.css, correct the above breaking change |
🔴 Hot reloading does not detect the change and remains in error. |
The only way to fix the last scenario is to restart webpack.
Please paste the results of npx webpack info here
$ npx webpack info
System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz
Memory: 7.60 GB / 15.36 GB
Binaries:
Node: 18.20.7 - ~/.nvm/versions/node/v18.20.7/bin/node
Yarn: 1.22.22 - ~/.yarn/bin/yarn
npm: 10.8.2 - ~/.nvm/versions/node/v18.20.7/bin/npm
Browsers:
Chrome: 117.0.5938.132
Packages:
babel-loader: ^8.1.0 => 8.4.1
css-loader: ^4.2.0 => 4.3.0
html-webpack-plugin: ^5.5.0 => 5.6.3
postcss-loader: ^7.0.1 => 7.3.4
webpack: ^5.74.0 => 5.98.0
webpack-cli: 4.10.0 => 4.10.0
webpack-dev-server: ^4.11.1 => 4.15.2