ie11 compiling + compatibility issues

[tjheffner]

IE11 appears to error on the inclusion of bootstrap's button.js because it's ES6 in the module.
By default webpack/babel does not seem to transpile this code, due to the exclusion of /node_modules/ in the loader config, even though it's included in our dependency chain elsewhere.

ie:

  {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      },
    },

prevents this from compiling properly for IE11. This also affects other node_modules that a project may include for IE11, but can be fixed with this workaround:

babel/babel-loader#171 (comment)

the workaround does not appear to negatively affect modern browsers, from what i can tell.

[illepic]

Quick note on the solution here:

We had webpack configured to ignore everything in node_modules. The means no dependency management, no transpiling for anything in node_modules. This has mostly worked since we generally include dist versions of all our dependencies.

However, we don't use the dist version of Bootstrap. We use the src version which exports full ES6 modules (yay!). This means Bootstrap was never transpiled from ES6 to ES5, which @tjheffner ran into above because IE11 doesn't even support fat arrow (boo).

When Bootstrap moved to beta.3, Chrome started exploding because beta.3 started to feature the use of the spread operator which is not supported by the Babel env setting (which is what we had configured).

We solved this by doing the following:

Telling Webpack to parse node_modules/bootstrap:

...
exclude: /node_modules\/(?!(bootstrap)\/).*/,
...

And then installing babel-plugin-transform-object-rest-spread and configuring .babelrc.js like so:

{
  "presets": ["env"],
  "plugins": [
    "transform-object-rest-spread",
    ...
  ]
}