Syntax Error In IE 11 for this node_moduels

user_8931783 0
Viewed 5858

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`;
};
react-dom react-native reactjs
5 Answers

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:

enter image description here

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:

enter image description here

and ran 'npm start.

user_31587050

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

user_2846930

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.

user_25568670

I had similar issue @punkbit solution and installing 'react-app-polyfill' and importing it at the top of the index.js file solved it

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

If it still does not work delete node-modules and reinstall also clear cache in IE.

All the best :)

user_62700950

This problem occurs because your compiled code contains (modern) ES6 syntax whilst IE11 only supports ES5.

A way to fix this is to instruct webpack to specifically compile the mentioned packages into ES5;

module: {
  rules: [{
    test: /\.(tsx?|js)$/,
    include: [
      // These dependencies have es6 syntax which ie11 doesn't like.
      // Whenever you see a "SyntaxError" that crashes IE11 because of a new lib, add it here.
      path.join(__dirname, 'node_modules/react-intl'),
      path.join(__dirname, 'node_modules/pkce-challenge'),
      path.join(__dirname, 'node_modules/fuse.js')
    ],
    use: [{
      loader: 'ts-loader', // Or whatever loader you're using
    }]
  }]
}

for me this was: fuse.js, pkce-challenge and react-intl.

user_50798840
Related