IE 11 "Expected Identifier" error on spread operator found in AJV code

Question

In my Angular 6 app, I'm getting a console error in IE 11 as "Script1010: "Expected Identifier". No issues with evergreen browsers.

The error occurs at the first "." in the spread operator function, identified in the bundled js file is:

function(e,t,n){"use strict";function 1(...e){if(e.length>1)
{e[0]=e[0].slice(0,-1);const t=e.length-1;for(let n=1;n<t;++n)e[n]=e[n].slice(1,-1);return e[t]=e[t].slice(1),e.join("")}

Searching on keywords around this line of code, I've identified that it comes from the ajv.min.js file, specifically, perhaps within this code section from the file:

44: [function(e, r, t) {
        var a;
        a = this,
            function(e) {
                "use strict";

                function C() {
                    for (var e = arguments.length, r = Array(e), t = 0; t < e; t++) r[t] = arguments[t];
                    if (1 < r.length) {
                        r[0] = r[0].slice(0, -1);
                        for (var a = r.length - 1, s = 1; s < a; ++s) r[s] = r[s].slice(1, -1);
                        return r[a] = r[a].slice(1), r.join("")
                    }
                    return r[0]
                }

Apparently, the spread operator is not being transpiled into something IE11 can digest and the browser chokes on the first period in the (...e) function argument with an "Expected Identifier" error.

Any suggestions for workarounds or specific polyfills to fix the issue?

score 1 · Answer 1 · answered Apr 14 '20 at 03:11

IE browser not support the Spread syntax and Rest parameter, to get the same result, you could refer to the following methods:

Method 1:
Using JavaScript methods (such as: foreach or array method) to loop through the parameter or array items, instead of using Spread syntax or Rest Parameter. More details information, please check the following links:

Spread Operator equivalent in IE - Javascript

ES6 spread syntax IE not supported

Alternatives of spread syntax

Method 2:
using @babel/polyfill and the babel-plugin-transform-object-rest-spread polyfills. Try to use the following command to install the polyfill:

npm install --save @babel/polyfill

npm install --save-dev babel-plugin-transform-object-rest-spread

Besides, since IE browser not support ES 6 syntax, please check your polyfills.ts file, and uncomment the related package for IE browser.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/weak-map';
 import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following for the Reflect API. */
 import 'core-js/es6/reflect';


/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

+1 Thanks! I'm going to try adding the babel import to the default polyfills.ts and see if it resolves the issue. — Scott B, Apr 16 '20 at 18:58

score 1 · Accepted Answer · answered Apr 22 '20 at 22:23

1

The issue here was with punycode.js. Forcing punycode.js to version 1.4.1 fixes the issue. Our version of ajv was causing a later version of punycode.js to load and that version contains ES6 code that trips up IE.

answered Apr 22 '20 at 22:23

Scott B

38,833
65
160
266

IE 11 "Expected Identifier" error on spread operator found in AJV code

2 Answers2