Webpack-dev-server: 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.

Created on 30 Mar 2021  Â·  21Comments  Â·  Source: webpack/webpack-dev-server

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"
  }
}
picture hanya-0323

Most helpful comment

@laibao101 should fix https://github.com/webpack/webpack/releases/tag/v5.31.0

picture alexander-akait on 7 Apr 2021
👍2

All 21 comments

For maintainers only:

  • [ ] webpack-4
  • [ ] webpack-5
  • [ ] bug
  • [ ] critical-bug
  • [ ] enhancement
  • [ ] documentation
  • [ ] performance
  • [ ] dependencies
  • [ ] question
webpack-bot picture webpack-bot on 30 Mar 2021

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

alexander-akait picture alexander-akait on 31 Mar 2021

will

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

hanya-0323 picture hanya-0323 on 31 Mar 2021

Can you provide simple case?

alexander-akait picture alexander-akait on 31 Mar 2021
👀1

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.

hanya-0323 picture hanya-0323 on 31 Mar 2021

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

laibao101 picture laibao101 on 2 Apr 2021

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

alexander-akait picture alexander-akait on 2 Apr 2021

@alexander-akait @hanya-0323 i installed [email protected]，and it does not fixed。

laibao101 picture laibao101 on 6 Apr 2021

@alexander-akait @hanya-0323 i installed [email protected]，and it does not fixed。

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

hanya-0323 picture hanya-0323 on 6 Apr 2021

@alexander-akait @hanya-0323 i installed [email protected]，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。

laibao101 picture laibao101 on 6 Apr 2021

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed [email protected]，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

hanya-0323 picture hanya-0323 on 6 Apr 2021

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed [email protected]，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。

laibao101 picture laibao101 on 6 Apr 2021

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed [email protected]，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?

hanya-0323 picture hanya-0323 on 6 Apr 2021

webpack-dev-server@beta-1

@alexander-akait @hanya-0323 i installed [email protected]，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?

no, it does not work when i add module.hot。if i remove module.hot， it will always reload，that's not i want

laibao101 picture laibao101 on 6 Apr 2021

You need hot code to working with HMR

alexander-akait picture alexander-akait on 6 Apr 2021

You need hot code to working with HMR

how can i use webpack5 to get the same behavior。 if syntax error and fixed， it will reload。 the same code in webpack4 works fine。

laibao101 picture laibao101 on 6 Apr 2021

@laibao101 Please create fully reproducible test repo, it works fine for me in all cases

alexander-akait picture alexander-akait on 6 Apr 2021

@laibao101 Please create fully reproducible test repo, it works fine for me in all cases

https://github.com/laibao101/hmr-test. this is a demo, you can Comment out the code import App from './App', and the chrome devtool will show the error. then you can recovery the code, this case does not work, can not reload. the same code works fine in webpack4, i dont know how to make it work in webpack5

laibao101 picture laibao101 on 6 Apr 2021

Reproduced, give me time to investigate, but I think it is webpack bug, because 4-beta.2 works with webpack v4 and no problems

alexander-akait picture alexander-akait on 7 Apr 2021

@laibao101 should fix https://github.com/webpack/webpack/releases/tag/v5.31.0

alexander-akait picture alexander-akait on 7 Apr 2021
👍2

@laibao101 should fix https://github.com/webpack/webpack/releases/tag/v5.31.0

perfect，it works on webpack5. thanks。

laibao101 picture laibao101 on 8 Apr 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wojtekmaj picture wojtekmaj  Â·  3Comments
Jack-Works picture Jack-Works  Â·  3Comments
mischkl picture mischkl  Â·  3Comments
gimmi picture gimmi  Â·  3Comments
adiachenko picture adiachenko  Â·  3Comments