cssreactjswebpackwebpack-dev-serverpostcss-loader

Webpack Dev Server stops on error originated in postcss-loader


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"
  }
}


Solution

  • 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