v2.8.0 / #1058 breaks compatibility with Internet Explorer (template strings)

[aloker]

Bug report

After an upgrade to 2.8.1, my app does not work in Internet Explorer 11 anymore.
Error:
SCRIPT1014: Invalid character

The error points to

webpack-dev-server/client/index.js

Line 68 in e8cbdad

type: `webpack${type}`,

IE does not support template literals according to https://kangax.github.io/compat-table/es6/

This change and many other template-literals were introduced in #1058

Packages used:
webpack@3.5.6
webpack-dev-server@2.8.1
react@6.26.0 (presets: env, stage-1, react and flow, plugins: react-hot-loader/babel, react-html-attrs, transform-decorators-legacy, syntax-dynamic-import)

I'm running Windows 10 Pro 1703

Rolling back to 2.7.1 fixes the issue.

Please consider undoing the usage of template literals as this is a show-stopper for testing on IE during development.

[shellscape]

@aloker Thanks for the report. Please note that the issue templates are not optional, we ask everyone to fill them out and not remove the contents of the template.

That dang IE though. We tested the changes against Edge, but not IE. I'll queue up a change and release of 2.8.2 to address this today. For the time being you can safely downgrade to 2.7.1.

[aloker]

Thanks for the quick response.

I'm sorry about the template, I'll stick to it in the future.

[shellscape]

@aloker no worries, that's a nasty one for sure.

please try installing webpack-dev-server from npm install git://github.com/webpack/webpack-dev-server.git#ie-template-fix and running against that. please let me know if that resolves the issue for you. I don't have an IE machine/vm to test with at the moment and I'm coming up short finding an ES5 validator that works on the web. so I'm gonna need your help on this one 😄

[aloker]

Now it chokes on the shorthand property syntax at

webpack-dev-server/client/index.js

Line 69 in c45fb8b

data

IE does not support

self.postMessage({
      type: 'webpack' + type,
      data
    }, '*');

You'll have to use ES5 syntax:

self.postMessage({
      type: 'webpack' + type,
      data: data
    }, '*');

Basically, there's not much ES6 syntax you can use if you want to support IE...

[aloker]

I'll try to fix the errors here and provide a diff.

[shellscape]

@aloker much appreciated.

[aloker]

Below is the patch for the client, that wasn't too hard.

But there's another issue: the referenced package strip-ansi uses ES6-syntax itself since version 4.0.0:
https://github.com/chalk/strip-ansi/blob/c299056a42b31d7a479d6a89b41318b2a2462cc7/index.js#L4

The previously referenced version, v3.0.0, did not:
https://github.com/chalk/strip-ansi/blob/afd80021ef59354b66c742c161c58682c0b4c450/index.js#L4

This is getting a bit hairy...

Anyway, with this patch and the version of strip-ansi rolled back to v3, I got it working in IE again.

--- index.js	Thu Sep 14 16:05:41 2017
+++ index.js	Thu Sep 14 17:10:22 2017
@@ -66,23 +66,23 @@
   ) {
     self.postMessage({
       type: 'webpack' + type,
-      data
+      data: data
     }, '*');
   }
 }
 
 const onSocketMsg = {
-  hot() {
+  hot: function() {
     hot = true;
     log.info('[WDS] Hot Module Replacement enabled.');
   },
-  invalid() {
+  invalid: function() {
     log.info('[WDS] App updated. Recompiling...');
     // fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (useWarningOverlay || useErrorOverlay) overlay.clear();
     sendMsg('Invalid');
   },
-  hash(hash) {
+  hash: function(hash) {
     currentHash = hash;
   },
   'still-ok': function stillOk() {
@@ -112,7 +112,7 @@
         log.error('[WDS] Unknown clientLogLevel \'' + level + '\'');
     }
   },
-  overlay(value) {
+  overlay: function(value) {
     if (typeof document !== 'undefined') {
       if (typeof (value) === 'boolean') {
         useWarningOverlay = false;
@@ -123,7 +123,7 @@
       }
     }
   },
-  progress(progress) {
+  progress: function(progress) {
     if (typeof document !== 'undefined') {
       useProgress = progress;
     }
@@ -131,7 +131,7 @@
   'progress-update': function progressUpdate(data) {
     if (useProgress) log.info('[WDS] ' + data.percent + '% - ' + data.msg + '.');
   },
-  ok() {
+  ok: function() {
     sendMsg('Ok');
     if (useWarningOverlay || useErrorOverlay) overlay.clear();
     if (initial) return initial = false; // eslint-disable-line no-return-assign
@@ -141,9 +141,9 @@
     log.info('[WDS] Content base changed. Reloading...');
     self.location.reload();
   },
-  warnings(warnings) {
+  warnings: function(warnings) {
     log.warn('[WDS] Warnings while compiling.');
-    const strippedWarnings = warnings.map(warning => stripAnsi(warning));
+    const strippedWarnings = warnings.map(function(warning) { return stripAnsi(warning); });
     sendMsg('Warnings', strippedWarnings);
     for (let i = 0; i < strippedWarnings.length; i++) { log.warn(strippedWarnings[i]); }
     if (useWarningOverlay) overlay.showMessage(warnings);
@@ -151,17 +151,17 @@
     if (initial) return initial = false; // eslint-disable-line no-return-assign
     reloadApp();
   },
-  errors(errors) {
+  errors: function(errors) {
     log.error('[WDS] Errors while compiling. Reload prevented.');
-    const strippedErrors = errors.map(error => stripAnsi(error));
+    const strippedErrors = errors.map(function(error) { return stripAnsi(error); });
     sendMsg('Errors', strippedErrors);
     for (let i = 0; i < strippedErrors.length; i++) { log.error(strippedErrors[i]); }
     if (useErrorOverlay) overlay.showMessage(errors);
   },
-  error(error) {
+  error: function(error) {
     log.error(error);
   },
-  close() {
+  close: function() {
     log.error('[WDS] Disconnected!');
     sendMsg('Close');
   }
@@ -191,9 +191,9 @@
 }
 
 const socketUrl = url.format({
-  protocol,
+  protocol: protocol,
   auth: urlParts.auth,
-  hostname,
+  hostname: hostname,
   port: urlParts.port,
   pathname: urlParts.path == null || urlParts.path === '/' ? '/sockjs-node' : urlParts.path
 });
@@ -201,7 +201,7 @@
 socket(socketUrl, onSocketMsg);
 
 let isUnloading = false;
-self.addEventListener('beforeunload', () => {
+self.addEventListener('beforeunload', function() {
   isUnloading = true;
 });
 
--- overlay.js	Thu Sep 14 16:05:41 2017
+++ overlay.js	Thu Sep 14 17:10:33 2017
@@ -83,7 +83,7 @@
   }
 
   // Create iframe and, when it is ready, a div inside it.
-  overlayIframe = createOverlayIframe(() => {
+  overlayIframe = createOverlayIframe(function() {
     overlayDiv = addOverlayDivTo(overlayIframe);
     // Now we can talk!
     lastOnOverlayDivReady(overlayDiv);
@@ -96,7 +96,7 @@
 }
 
 function showMessageOverlay(message) {
-  ensureOverlayDivExists((div) => {
+  ensureOverlayDivExists(function(div) {
     // Make it look similar to our terminal.
     div.innerHTML = '<span style="color: #' + colors.red +
                     '">Failed to compile.</span><br><br>' +
--- socket.js	Thu Sep 14 16:05:41 2017
+++ socket.js	Thu Sep 14 16:56:55 2017
@@ -26,7 +26,7 @@
       const retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
       retries += 1;
 
-      setTimeout(() => {
+      setTimeout(function() {
         socket(url, handlers);
       }, retryInMs);
     }

[shellscape]

Leave it to IE to cause issues. Thanks for that diff. I'll get that implemented. I'll add transpiling to ES5 to the task list for v3 for the client scripts, so we don't run into this again.

[shellscape]

@aloker just pushed your changes to the ie-template-fix branch. please have a look and see if we've caught everything

[aloker]

Looks good to me, I don't get any errors in IE 👍

[shablenko]

issue is still here, i have arrow functions in resulting bundle, so ie 11 is still broken

[patrickmatte]

It's broken in IE11 for me too because of the arrow functions

[jakubhomoly]

2.11.1 fixed this for me.