Syntax Error In IE 11 for this node_moduels

Question

I am getting a syntax error in IE when this component of react is loaded in the webpage. Has anybody got the same problem? This is an inherited package, and a syntax error from node_modules makes no sense?

"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`;
};

Answer 1

If you are using newer versions of Node/NPM, check your package.json file -> "browserslist" section.

This is the default "browserslist" created for you if you do not have one defined:

In this case, if you run "npm start" on your LOCAL Environment, Babel will not create Polyfills for IE11 because its not included as a target browser in "development". To get this working, I deleted my node_modules directory completely, ran 'npm install', updated package.json with:

and ran 'npm start.

Answer 2

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 ;)

Answer 3

TLDR; you don't need this library, just run

npm run build

And it will be excluded from your build.

I have same problem with create-react-app, and I solve it (no). From my discovery, this library should not appear in browser, because it was designed for nodejs environment. Also I found, this library come to me as dependency of jest, and jest is dependency for tests and it come as dependency for react.

So, I run

npm run build
server -s build

And try my application in IE. And it work. So, when you run

 npm start

It make file including dev dependencies and other garbage that should not appear in production and in browser at all. When you run

npm run build

It make file only with required project libraries.