Syntax Error in IE11 for node

Here’s a commonly asked question in the web, regarding Syntax error in IE11 for node_modules. Let’s pick a Reactjs and Webpack case:

"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");

const wrapAnsi16 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${code + offset}m`;
};

const wrapAnsi256 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${38 + offset};5;${code}m`;
};

The reason why this fails is that babel or your other favorite transpiler might ignore node_modules (if that’s how its configured), so you need to include it manually because IE does not support arrow function syntax.

First, if you search for wrapAnsi16 or wrapAnsi256 function names online it’ll point you to common npm packages, such as: ansi-styles, chalk or color-convert, debug, strip-ansi, etc.

If you are using Webpack you can add the following to your rules:

module: {
  rules: [{
      exclude: /node_modules\/(?!(color-convert|ansi-styles|strip-ansi|ansi-regex|debug|react-dev-utils|chalk)\/).*/
  }]
}

or, easier to read:

module: {
  rules: [{
     include: [
        path.resolve(__dirname, 'node_modules/ansi-styles'),
        path.resolve(__dirname, 'node_modules/strip-ansi'),
        ... other's here...
        path.resolve(__dirname, 'src'),
     ]
  }]
}

Hope this helps somebody in the future ;)