Webpack-dev-server: Project built with v2.8.2 outputs webpack code with ES6 features which causes error with browsers that don't support it

[pavle-goloskokovic]

• Operating System: Windows 10 Home
• Node Version: v6.10.0
• NPM Version: 3.10.10
• webpack Version: 3.6.0
• webpack-dev-server Version: 2.8.2

• [ ] This is a feature request
• [x] This is a bug

I'm building an app that targets device with a browser that does not support ES6 features.
I've been using webpack-dev-server for development and it worked fine up to and including v2.7.1.
When I updated version to 2.8.2 it started outputting webpack code with ES6 features which causes browser to throw an error.
Project code and configuration for webpack, typescript and command for running webpack-dev-server are the same, the only difference is webpack-dev-server version.
Building app only with webpack works fine as well.
You can find below code that is server by webpack-dev-server after starting it:

Code

Compiled webpack code with webpack-dev-server v2.7.1:

...
/* WEBPACK VAR INJECTION */(function(__resourceQuery) {/* global __resourceQuery WorkerGlobalScope */
var url = __webpack_require__(61);
var stripAnsi = __webpack_require__(67);
var log = __webpack_require__(69)
var socket = __webpack_require__(70);
var overlay = __webpack_require__(102);
...

Compiled webpack code with webpack-dev-server v2.8.2:

...
/* WEBPACK VAR INJECTION */(function(__resourceQuery) {

/* global __resourceQuery WorkerGlobalScope self */
/* eslint prefer-destructuring: off */

const url = __webpack_require__(61);
const stripAnsi = __webpack_require__(67);
const log = __webpack_require__(69).getLogger('webpack-dev-server');
const socket = __webpack_require__(70);
const overlay = __webpack_require__(102);
...

Expected Behavior

Code runs fine when built with webpack-dev-server v2.8.2.

Actual Behavior

Browser throws an error:

Syntax error at line 20608 while loading: syntax error
const url = __webpac
^

How can we reproduce the behavior?

1. Start any project built with webpack using webpack-dev-server v2.8.2
2. Run it in any browser that does not support ES6 features such as const or let (any such browser can be found in this table: https://kangax.github.io/compat-table/es6/)

[shellscape]

@pavle-goloskokovic thanks for filing an issue. this is kind of a duplicate of #1091, but you've been more specific, so we'll address it. Unfortunately we're not supporting browsers that don't support const and let - all major browsers two full major versions back support those keywords now. Old IE support ended in January 2016. If you're using a fringe browser that doesn't support those keywords, please open an issue with those browsers' projects. We wrestled with whether or not this was a breaking change that constituted a new major version, but since Old IE support ended so very long ago, and all other major browsers have supported those keywords for over two years, we felt it was reasonable in a minor version. Unfortunately this isn't something we're gong to fix for 2.8.x. If you still need to support those really old browsers, you'll have to stick with 2.7.x.

[e01010100]

Can a "Breaking Changes" section be added to the v2.8.0 release notes, noting that browsers that do not natively support ES6 will no longer be supported?

This would help alleviate confusion for users upgrading, especially those that test/unit-test on older browsers.

Thank you!

[pjivers]

I agree with @e01010100 . I just ran into this issue and it took me a while to figure out what was going on (Thought it had something to do with my webpack config or babel-loader).

[HopeLyn]

Agree.I was just involved in some project , which had some webpack config that I am not very familiar with.I was so puzzled until I found this page.

[EloB]

This issue took me more than 2-3 days to figure out after I saw that small notice on README. This is like a side project/repo to webpack and this info is not easy to find. I'm working with multiple "smart" devices/platforms that often have really bad debugging possibilities and webpack is the best thing that ever happend to these devices because of hot loading in development etc. Is their a reason why you don't define jsnext:main and main in package.json? It's really easy to add and will remove a lot of headache and is the only blocker right now for webpack-dev-server to run on older browsers/devices. What is the value of this?

[ViggoV]

Wait, what?! So WDS doesn't compile according to the webpack config?

[EloB]

@ViggoV It's normal to set babel-loader to exclude node_modules/. Even in their documenation they do it to speed up building time. https://webpack.js.org/loaders/babel-loader/#usage and https://webpack.js.org/loaders/babel-loader/#babel-loader-is-slow-. So your bundle ends up with const and let that crashes older browsers/devices.
To money patch this right now you have to use include instead of exclude and pick your own source folder and include some of the files from webpack-dev-server.

[joshhead]

I ended up adding --inline=false to webpack-dev-server to test in IE10. It disables auto-refresh but it also prevents the ES6 code from being added into the bundle.

[EloB]

@joshhead I think they are added ES5 to the bundle right now... Saw some PRs about it 😃

https://github.com/webpack/webpack-dev-server/pull/1273
https://github.com/webpack/webpack-dev-server/pull/1270