webpack-dev-server not going through babel

Created on 30 Jul 2019  路  2Comments  路  Source: webpack/webpack-dev-server

  • Operating System: macOS
  • Node Version: 12.4
  • NPM Version: 6.9
  • webpack Version: 4.35
  • webpack-dev-server Version: 3.7.2
  • Browser: IE11 (target browser)
  • [X] This is a bug
  • [ ] This is a modification request

Repro

https://bitbucket.org/IamHttP/webpack-dev-server-ie11/src

Expected Behavior

npm start should start the dev server, which should be safe for IE11

Actual Behavior

missing wrappers around pieces of code make the code fail in IE11, specifically reserved words

For Bugs; How can we reproduce the behavior?

Start the repro

More details

In the repo I've linked, there are two things of interest.
The code inside /src/index.js has a the following lines:

let createDebug = {}; createDebug.default = true;

when starting the dev server, the code (main.js) has the following output
var createDebug = {};
createDebug["default"] = true;

However, if you search for "createDebug.default" in main.js, you'll find some more occurrences.
since 'default' is a reserved word, IE11 throws an exception.

the code createDebug.default is inserted by (I think) webpack-dev-server, or by some inner dependency.
Since babel obviously works (renamed .default to ["default"]), it seems babel is not running on the webpack-dev-server code, or it's bundle.

Most helpful comment

For future folk, browserslist does not fix this issue.
This is also a problem with create-react-app, with exactly the same symptoms (createDebug.default being the source code).

From what I've seen create-react-app does not support IE11 in development mode.
as discussed here:
https://github.com/facebook/create-react-app/issues/5832#issuecomment-464171624

I think this related to some node_modules not being transpiled by babel, and one of the suggestions is to transpile them manually, or maybe open issues in the offending packages.
I tried forcing babel to transpile node_modules but couldn't get it to work.

@evilebottnawi - Is there an example setup of webpack-dev-server that works for IE11?

All 2 comments

You need setup babel for IE11, it is problem on babel level, you can create browserslist, latest version of webpack works since IE9

For future folk, browserslist does not fix this issue.
This is also a problem with create-react-app, with exactly the same symptoms (createDebug.default being the source code).

From what I've seen create-react-app does not support IE11 in development mode.
as discussed here:
https://github.com/facebook/create-react-app/issues/5832#issuecomment-464171624

I think this related to some node_modules not being transpiled by babel, and one of the suggestions is to transpile them manually, or maybe open issues in the offending packages.
I tried forcing babel to transpile node_modules but couldn't get it to work.

@evilebottnawi - Is there an example setup of webpack-dev-server that works for IE11?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

uMaxmaxmaximus picture uMaxmaxmaximus  路  3Comments

MJ111 picture MJ111  路  3Comments

subblue picture subblue  路  3Comments

daryn-k picture daryn-k  路  3Comments

Ky6uk picture Ky6uk  路  3Comments