Webpack Dev Server stops on error originated in postcss-loader - css

Question

I'm using webpack-dev-server for development but after upgrading to webpack 5 it just stops when postcss-loader can't parse css file.
I start dev server via npx webpack-dev-server and when I start typing new rule in .css webpack tries to rebuild my app but since I haven't finished typing, file contains incorrect css rule. So build fails due to postcss-loader throwing error CssSyntaxError. However that makes webpack-dev-server stop completely. Previously webpack-dev-server simply ignored failed builds and waited till webpack manages to successfully build my app.
I prepared git repo where this can be reproduced: https://github.com/s-shev/webpack-dev-server-stops
I'm using latest versions of webpack, webpack-cli and webpack-dev-server
I'd appreciate if anyone can say whether I'm doing something wrong or if it's a bug in webpack-dev-derver.
Here's my webpack.config:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const devMode = process.env.NODE_ENV !== "production";
module.exports = {
mode: devMode ? "development" : "production",
devtool: devMode ? "eval-cheap-module-source-map" : "source-map",
entry: path.resolve(__dirname, "./src/index"),
devServer: {
host: "0.0.0.0",
port: 9000,
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: { loader: "ts-loader" },
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
modules: ["./node_modules"],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "public", "index.html"),
}),
],
};
and pacakge.json:
{
"name": "webpack-dev-server-stops",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"postcss-loader": "^7.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.3.1",
"typescript": "^4.7.4",
"typescript-plugin-css-modules": "^1.3.1",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}
}

Answer 1

Turned out to be an issue in postcss. Updating postcss-loader to 7.0.1 fixed the issue.
https://github.com/webpack/webpack-dev-server/issues/4514