webpack dev server live reloading not working when i set target:["web","es5"] in webpack.config.js. if i remove the "target" property in webpack.config.js, live reloading started working.

[irfanit93]

• Operating System:Windows
• Node Version: 12.18.2
• NPM Version:6.14.5
• webpack Version:5.1.3
• webpack-dev-server Version:3.11.0
• Browser: chrome Version 86.0.4240.111 (Official Build) (64-bit)

• [ yes] This is a bug
• [ no] This is a modification request

Code

// webpack.config.js

const path = require('path'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const webpack = require('webpack');

module.exports = { target:["web","es5"], mode:"development", entry:{ index: './src/index.js' }, output:{ filename:'[name].bundle.js', path:path.resolve(__dirname,'dist') }, devServer:{ contentBase:'./dist', compress:true, port:8000, writeToDisk:true, open:true, historyApiFallback: true }, module:{ rules:[ { test: /.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: 'babel-loader' }, { test: /.css$/i, use: [ { loader: 'style-loader', options: { injectType: 'linkTag' } }, { loader: 'file-loader' } ] } ] }, plugins: [ new webpack.ProgressPlugin(), new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:'./src/index.html' }) ] };

// additional code, remove if not needed.

Expected Behavior

Live reload should work if i specify target:["web","es5"] in webpack.config.js

Actual Behavior

Live reload not working if i specify target:["web","es5"] in webpack.config.js

For Bugs; How can we reproduce the behavior?

any simple web app using webpack dev server will reproduce this behavior while mentioning target:["web","es5"] in webpack.config.js

For Features; What is the motivation and/or use-case for the feature?

No. Its not a feature request

[alexander-akait]

Please stop spam, we are working on it, yes it is bug, it is already reported

[lcylwik]

hello @alexander-akait , this bug has already been solved?

I have the same configuration: target:["web","es5"] in "webpack": "^5.28.0" but not work.

[alexander-akait]

Yes, it is fixed, what is the problem? You need webpack-dev-server@beta-1

[alecgregory]

I don't want to unnecessarily labor this but I still can't get target: ["web", "es5"] to work even after running npm i webpack-dev-server@4.0.0-beta.3.

target: "es5" makes the code compatible with IE11 but there is no live reloading target: "web" allows live reloading in non-IE11 browsers but breaks IE11 compatibility target: ["web", "es5"] IE11 console indicates update check but gives the error No browser support: need fetch API

[alexander-akait]

webpack doesn't polyfill browser, please read changelog when you use alpha/beta/rc, here example how to run on IE11 https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.2

[alecgregory]

Thank you, that is what I needed. Taking the following steps fixed the issue for me 1) Installing whatwg-fetch npm i --save-dev whatwg-fetch (install core-js too, I already had it) 2) Adding the following to my webpack.dev.config (from: https://github.com/webpack/webpack-dev-server/releases/tag/v4.0.0-beta.2)

module.exports = {
  ...,
  entry: {
    entry: [
      'whatwg-fetch', 
      'core-js/features/promise', 
      './entry.js' /* Replace this with your entry point, e.g. mine was './src/index.js' */
    ],
  },
};