webpack-dev-server stops watching files for changes on .js syntax error

[Darkzarich]

• Operating System: Windows 10
• Node Version: v14.16.1
• NPM Version: 6.14.12
• webpack Version: 5.31.0
• webpack-dev-server Version: 3.11.2
• Browser: Version 89.0.4389.114 (Official Build) (64-bit)

• This is a bug

Code

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = (ext) =>
  isDev ? `bundle.${ext}` : `bundle.[fullhash].${ext}`

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core'),
    },
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    port: 8080,
    hot: isDev,
    watchContentBase: true,
  },
  plugins: [
    new ESLintPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      filename: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd,
      },
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/favicon.ico'),
          to: path.resolve(__dirname, 'dist'),
        },
      ],
    }),
    new MiniCssExtractPlugin({
      filename: filename('css'),
    }),
  ],
  target: 'web',
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
}

deps:

{
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "copy-webpack-plugin": "^8.1.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "eslint": "^7.23.0",
    "eslint-config-google": "^0.14.0",
    "eslint-webpack-plugin": "^2.5.3",
    "html-webpack-plugin": "^5.3.1",
    "mini-css-extract-plugin": "^1.4.0",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "webpack": "^5.31.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "v3.11.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1"
  }
}

index.js

console.log('working!')

cosole.log('working!') // trigger an error

Expected Behavior

webpack-dev-server successfully refreshes the page or places in changes

Actual Behavior

A syntax error breaks watching files and webpack-dev-server stops showing any new changes (but compiles them, terminal tells this) until the page is refreshed manually with F5

[snitin315]

Can you try with webpack-dev-server@beta.2

[Darkzarich]

Can you try with webpack-dev-server@beta.2

I can't use watchContentBase option with the latest version (or it's just not documented) since it was removed before, without this if I change index.html somehow I don't see any changes so I have to use an older version

[snitin315]

I think you need to use watchFiles option.

webpack-dev-server/lib/options.json

Line 493 in e809763

"watchFiles": {

[alexander-akait]

Can you create reproducible test repo?

[Darkzarich]

I think you need to use watchFiles option.

webpack-dev-server/lib/options.json

Line 493 in e809763

"watchFiles": {

@snitin315 This works, thank you.

I installed the latest version which is v4.0.0-beta.2 and it works just fine for the problem I described but there is a new problem

@alexander-akait #3168 - here you said that

HMR and [contenthash] in mini-css-extract-plugin is not supported

But apparently the Refused to apply style from 'http://localhost:8080/bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. error is still present even with hot: false and any hashing in naming turned off.

I will link my repo, it's fairly small so you can use it to reproduce: https://github.com/Darkzarich/sheets-project-training/tree/feature/basic-markup (this very branch only). In index.js try to remove the last parenthesis in console.log('working!!!').

[alexander-akait]

Yep, reproduced

[alexander-akait]

Bug, we need to set optimization.emitOnErrors: false when hmr enabled by default, workaround:

optimization: {
  emitOnErrors: false
}

[snitin315]

@alexander-akait it should be done by webpack or webpack-dev-server?

[alexander-akait]

I need investigate, WIP on this

[alexander-akait]

Bug on webpack side due caching emitting logic and output.clean, reported

[DelliriumX]

Any news on this? I have recently rewired my entire project from scratch again only to find this now being an issue, I am unsure if I did it wrong or its just an error on the lib's side of things? For me it just never even watches at all, without syntax error either.

[alexander-akait]

You can avoid using output.clean right now, reported

[DelliriumX]

You can avoid using output.clean right now, reported

Care to elaborate just a bit, I am not sure where to set this option / I am not certain I use it. My webpack.config doesn't but I do use the CleanWebpackPlugin. Should I just disable that, or do something else?

devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      watchContentBase: true,
      https: true,
      host: '0.0.0.0',
      disableHostCheck: true,
      port: process.env.PORT || 8001,
      openPage: `https://localhost:${process.env.PORT || 8001}`,
      historyApiFallback: true,
      stats: 'errors-only',
      overlay: true,
    },

[alexander-akait]

Can you provide example/reproducible test repo?

[DelliriumX]

Can you provide example/reproducible test repo?

I can try to mock something up but will take some time, as the entire thing is super convoluted, give me 10 minutes or so to try to scrape from where I am and get it up as a new repo