In Webpack 5, the webpack-dev-server hot update encounters a JS syntax error, the websocket will break, and the hot update will not work after the change error is saved.

[hanya-0323]

##index.js

function a(){
    console.log('test')
}
a()
b()

##webpack.config.js

 const {resolve} = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
     entry:resolve(__dirname,'./index.js'),
     target:'web',
     output:{
         filename:'build-[hash:6].js',
         path:resolve(__dirname,'./build')
     },
     mode:'development',
     module:{
         rules:[
             {
                 test:/\.js$/,
                 exclude:/node_module/,
                 loader:'babel-loader',
                 options:{
                     presets:['@babel/preset-env','@babel/preset-react']
                 }
             }
         ]
     },
     plugins:[
         new HtmlWebpackPlugin({
             template:'./index.html', 
             minify: {
                 removeComments: true,
                 collapseWhitespace: true,
             },
             // inject: 'body', 
         }),
     ],
     devServer:{
         contentBase:resolve(__dirname, './build'),
         compress:true,
         port:3000,
         open:true,
         hot: true,
     },
 }

##package.json

{
  "name": "testtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  }
}

[webpack-bot]

For maintainers only:

• webpack-4
• webpack-5
• bug
• critical-bug
• enhancement
• documentation
• performance
• dependencies
• question

[alexander-akait]

Hm, due JS syntax error, client will don't work and so we can't reload browser

[hanya-0323]

will

However, if the same code is saved after correcting the errors in Webpack4, the browser will refresh and work correctly

[alexander-akait]

Can you provide simple case?

[hanya-0323]

Can you provide simple case?

Here is a simple Webpack4 demo I built

package.json

 {
  "name": "webpack4-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "4.5.0",
    "thread-loader": "^3.0.1",
    "webpack": "4.44.2",
    "webpack-cli": "3.3.12",
    "webpack-dev-server": "3.11.2"
  },
  "dependencies": {}
} 

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
     mode: 'development',
     entry: {
        main: path.join(__dirname, './index.js'), 
     },
     output: {
        path: path.join(__dirname, "./build"), 
        filename: "js/[name]_[hash:8].js",
    },
    module: {
        rules: [
            {
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'thread-loader',
                        options: {
                            workers: 2,
                            workerParallelJobs: 50,
                        }
                    },
                    {loader: 'babel-loader'},
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './index.html')
        }),
    ],
    devServer: {
        index: 'index.html',
        contentBase: './build',
        port: 3001,
        historyApiFallback: true,
        writeToDisk: true,
        hot: true,
    }
}

index.js

b()
function a(){
    console.log('test')
}
a()

The B function is not defined in the entry file. When executing the webpack-dev-server command, the browser throws an error, comments out the B function and saves it. The webpack-dev-server will automatically refresh the browser.

[laibao101]

i have the same problem。 the same code in webpack4 works fine。 but not work in webpack5。

[alexander-akait]

Fixed in master, please use webpack-dev-server@beta-1 (beta-2 release will be near future - today/tomorrow)

[laibao101]

@alexander-akait @hanya-0323 i installed webpack-dev-server@4.0.0-beta.1，and it does not fixed。

[hanya-0323]

@alexander-akait @hanya-0323 i installed webpack-dev-server@4.0.0-beta.1，and it does not fixed。

Mine is working on Alexander - Akait's suggestion 。What was your specific mistake?

[laibao101]

@alexander-akait @hanya-0323 i installed webpack-dev-server@4.0.0-beta.1，and it does not fixed。

Mine is working on Alexander - Akait's suggestion 。What was your specific mistake?

"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "5.x",
    "webpack": "5.x",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "4.0.0-beta.1"
  },

this is my dependencies， and code is your example code。 when the syntax error and i fix the error。it still can not relaod。

[hanya-0323]

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed webpack-dev-server@4.0.0-beta.1，and it does not fixed。

Mine is working on Alexander - Akait's suggestion 。What was your specific mistake?

"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "5.x",
    "webpack": "5.x",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "4.0.0-beta.1"
  },

this is my dependencies， and code is your example code。 when the syntax error and i fix the error。it still can not relaod。

webpack.config.js

 const {resolve} = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
     entry:resolve(__dirname,'./index.js'),
     output:{
         filename:'build-[hash:6].js',
         path:resolve(__dirname,'./build')
     },
     mode:'development',
     module:{
         rules:[
             {
                 test:/\.js$/,
                 exclude:/node_module/,
                 loader:'babel-loader',
                 options:{
                     presets:['@babel/preset-env','@babel/preset-react']
                 }
             }
         ]
     },

     plugins:[
         new HtmlWebpackPlugin({
             filename: 'index.html',
             template:resolve(__dirname,'./index.html'),
         }),
     ],
     devServer:{
         static:resolve(__dirname, './build'),
         compress:true,
         port:3000,
         open:true,
         hot: true,
     },
 }

package.json

{
  "name": "testtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^4.0.0-beta.1"
  }
}

index.js

// b()
function a(){
    console.log('1234')
}
a()

You can reinitialize the project npm init, npm install and download all dependent packages, then executenpx webpack-dev-server, which is the core code of all my tests. I guarantee that it will work

[laibao101]

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed webpack-dev-server@4.0.0-beta.1，and it does not fixed。

Mine is working on Alexander - Akait's suggestion 。What was your specific mistake?

"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "5.x",
    "webpack": "5.x",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "4.0.0-beta.1"
  },

this is my dependencies， and code is your example code。 when the syntax error and i fix the error。it still can not relaod。

webpack.config.js

 const {resolve} = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
     entry:resolve(__dirname,'./index.js'),
     output:{
         filename:'build-[hash:6].js',
         path:resolve(__dirname,'./build')
     },
     mode:'development',
     module:{
         rules:[
             {
                 test:/\.js$/,
                 exclude:/node_module/,
                 loader:'babel-loader',
                 options:{
                     presets:['@babel/preset-env','@babel/preset-react']
                 }
             }
         ]
     },

     plugins:[
         new HtmlWebpackPlugin({
             filename: 'index.html',
             template:resolve(__dirname,'./index.html'),
         }),
     ],
     devServer:{
         static:resolve(__dirname, './build'),
         compress:true,
         port:3000,
         open:true,
         hot: true,
     },
 }

package.json

{
  "name": "testtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^4.0.0-beta.1"
  }
}

index.js

// b()
function a(){
    console.log('1234')
}
a()

You can reinitialize the project npm init, npm install and download all dependent packages, then executenpx webpack-dev-server, which is the core code of all my tests. I guarantee that it will work

you forget code

if (module.hot) {
  module.hot.accept(() => {
    console.log(1)
  })
}

without module.hot，it will always reload，has not HMR。

[hanya-0323]

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed webpack-dev-server@4.0.0-beta.1，and it does not fixed。

Mine is working on Alexander - Akait's suggestion 。What was your specific mistake?

"devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "5.x",
    "webpack": "5.x",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "4.0.0-beta.1"
  },

this is my dependencies， and code is your example code。 when the syntax error and i fix the error。it still can not relaod。

webpack.config.js

 const {resolve} = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 module.exports = {
     entry:resolve(__dirname,'./index.js'),
     output:{
         filename:'build-[hash:6].js',
         path:resolve(__dirname,'./build')
     },
     mode:'development',
     module:{
         rules:[
             {
                 test:/\.js$/,
                 exclude:/node_module/,
                 loader:'babel-loader',
                 options:{
                     presets:['@babel/preset-env','@babel/preset-react']
                 }
             }
         ]
     },

     plugins:[
         new HtmlWebpackPlugin({
             filename: 'index.html',
             template:resolve(__dirname,'./index.html'),
         }),
     ],
     devServer:{
         static:resolve(__dirname, './build'),
         compress:true,
         port:3000,
         open:true,
         hot: true,
     },
 }

package.json

{
  "name": "testtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^4.0.0-beta.1"
  }
}

index.js

// b()
function a(){
    console.log('1234')
}
a()

You can reinitialize the project npm init, npm install and download all dependent packages, then executenpx webpack-dev-server, which is the core code of all my tests. I guarantee that it will work

you forget code

if (module.hot) {
  module.hot.accept(() => {
    console.log(1)
  })
}

without module.hot，it will always reload，has not HMR。

This is just my test demo, of course you can use it in the official project. Do you now save webpack-dev-server to work properly?