IE11 fails to load with Invalid character error

[creage]

• Operating System: Windows 10
• Node Version: 9.3.0
• NPM Version: 5.5.1
• webpack Version: 3.10.0
• webpack-dev-server Version: 2.10.0

• This is a bug
• This is a modification request

Expected Behavior

Webpack-dev-server allows running my app in IE11

Actual Behavior

This code makes webpack based development impossible to run in IE11, as it fails with error SCRIPT1014: Invalid character, index.js (361,13)

For Bugs; How can we reproduce the behavior?

Start any basic example of webpack-dev-server in IE11

[shellscape]

@creage thanks for the report. this is a great opportunity for a first pull request. We'd happily review one.

[shellscape]

It would seem that #1242 introduced an incomplete compilation using babel. Rules need to be injected into the config around here https://github.com/webpack/webpack-dev-server/blob/master/lib/util/addDevServerEntrypoints.js#L20 to compile the client scripts in the bundle. Something like:

    const rule = {
      test: /\/client\/.*\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['env']
          ]
        }
      }
    };

That also means that the babel dependencies need to be moved to dependencies rather than devDeps.

[sebtoun]

I have the same issue using Firefox 38.4.0: injected client code is not transpiled to es5.
As a result firefox complains that let is a reserved keyword.

The faulty injected code resides in client/index.js.
I'm new to webpack and have not grasped its internals yet but there seems to be already some rules in client/webpack.config.js that handles this file and the transpiled file (index.bundle.js) is laying in the node_module/webpack-dev-server/client but this is not the file that is injected in my entry point.
I don't know what to do to fix and would appreciate any help...

[shellscape]

@sebtoun that browser version is nearly 3 years old!. while the changes that @yyx990803 made in his PR should in theory support that browser... good lord download an update!

My previous comment contains the solution. Webpack needs to be told how to compile the client entries automatically added to the config. If I had more time I'd walk you through it. Big life change coming up so I'm crazy short on it right now.

[sebtoun]

My client company has a very restrictive work environment upgrade policies, I have to support that exact firefox version. It is thus safer for me to develop on the exact same environment and not having livereload really bothers me. I use webpack-dev-server v2.7.1 in the meantime but will upgrade to latest when this is fixed.

Despite your comment, I still don't get why node_module/webpack-dev-server contains both client/index.js and client/index.bundle.js (As far as I understand, those are the same code : the source version and the transpiled version) and I can't find where the client/index.js version is used and why it is used in this version (not the transpiled one). Again, I don't really grasp how webpack-dev-server is working in its entirety.

[shellscape]

client/index.bundle.js is for folks that use inline: false and such. There are examples demonstrating that in the repo. If you search for "index.bundle.js" at the top, in this repo, you'll find the examples that use it.

[sebtoun]

Why not using client/index.bundle.js instead of client/index.js when using inline: true ? Aren't those two versions the same code before and after transpilation|minification ?

[shellscape]

Because you'd be importing a webpack bundle into a webpack bundle as a module. It's just bad practice.

[yyx990803]

Shipping babel-core + babel-loader + babel-preset-env as dependencies of webpack-dev-server is definitely worse than just importing the pre-built bundle.