angularinternet-explorer-11polyfillscore-js

angular polyfill problem: IE11 - core-js v3.6.5 method es.string.split.js fails parsing regex /^|\s+/ on split


Angular 10, d3 5.16.0, core-js 3.6.5

The long and short of this is that d3-drag invokes d3-dispatch, which internally calls a method named .parseTypenames.

function parseTypenames(typenames, types) {
    return typenames.trim().split(/^|\s+/).map(function (t) {
    var name = "",
        i = t.indexOf(".");
    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
    if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
    return {
      type: t,
      name: name
    };
  });
}

es.string.split.js is doing something goofy processing the /^|\s+/ regular expression.

var foo = 'drag'.split(/^|\s+/) // yields an array = ['d','r','a','g'] when i'm expecting ['drag']

Any suggestions on what to do here? Hopefully I don't have a fundamental compatibility issue using IE11, Angular 10, and D3.

Thanks in advance.


Solution

  • I'm in favor of Michael's opinion. The issue is introduced by version 3.6.0 due to support of y flag. Besides Michael's solution, you can also refer to this workaround:

    You can replace the following line in your polyfills.ts:

    import 'core-js';
    

    to

    import 'core-js/stable/array';
    import 'core-js/stable/date';
    import 'core-js/stable/function';
    import 'core-js/stable/map';
    import 'core-js/stable/math';
    import 'core-js/stable/number';
    import 'core-js/stable/object';
    import 'core-js/stable/parse-float';
    import 'core-js/stable/parse-int';
    // import 'core-js/stable/regexp';
    import 'core-js/stable/set';
    // import 'core-js/stable/string';
    import 'core-js/stable/symbol';
    import 'core-js/stable/weak-map';
    

    Note that the imports regexp and string are commented. So when your application needs to do a split, it's using the native function of the browser instead of the split function in core-js.