IE 11 Script1028 on spread within function, tried Array.prototype.push.apply

Question

I have a .NET application which works perfectly in Chrome, FF, and Edge. I've been asked to retrofit some of our javascript to work in IE 11. I've already changed my compatibility to <META http-equiv="X-UA-Compatible" content="IE=11" />.

I'm receiving Script1028 on a specific spread function within curly braces. I've run several searches and attempted to add in the Array.prototype.push.apply 'fix' in various forms to replace the spread function for IE 11. I've run the code through Babeljs.io but it doesn't seem to know how to replace the spread function.

Here is the code that is breaking:

    createDataTree = function createDataTree(dataset) {
  //console.log(bookmarkfolders);
  var hashTable = Object.create(null);
  dataset.forEach(function (aData) {
    return hashTable[aData.DroppableID] = { ...aData,
      children: []
    };
  });
  var dataTree = [];
  dataset.forEach(function (aData) {
    if (aData.parentID != "") hashTable[aData.parentID].children.push(hashTable[aData.DroppableID]);
else dataTree.push(hashTable[aData.DroppableID]);
  });
  return dataTree;
}

I'm hoping there is a simple piece of this that I am missing and someone can quickly show me how to retrofit this spread function for IE 11 compatibility. Thanks in advance.

I made you a snippet. Please add an example of the dataset in a [mcve] - — mplungjan, Jan 07 '21 at 14:23
That's object spread, not array spread, so `push` is not really appropriate. You want `Object.assign`. See [MDN's article on the spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) — Heretic Monkey, Jan 07 '21 at 14:23
@epascarello - I noted in my OP that I used babeljs.io. Is there some setting at babeljs.io that I missed for converting spread syntax? Not trying to pester, I just don't know where to look and I've likely missed some steps. I used ES2015 and react. — jtrauma, Jan 07 '21 at 15:04
@mplungjan I don't understand what you did... The only difference that I saw was a line feed, so I rolled back your edit and added the line feed in for readability. Your edit still contained the `{ ...` piece so it still errored. Perhaps you could be more specific in your response? Regards! — jtrauma, Jan 07 '21 at 15:07
I created a runnable snippet without touching your code! You just click edit, scroll down and click edit above snippet and add your object! — mplungjan, Jan 07 '21 at 15:12
@Terry What you sent worked when I removed my curly braces before and after. Thank you!! — jtrauma, Jan 07 '21 at 15:20
@Terry I'm now getting Script438: Object doesn't support property or method 'assign' for that line of code. Is there something I need to load to make this work? — jtrauma, Jan 07 '21 at 15:33
You'll need a polyfill for that in IE11: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#polyfill — Terry, Jan 07 '21 at 23:33
After adding several polyfills, I'm still getting errors for other things. Our stakeholders have determined that they don't want to expend more time on this and, instead, will not support IE11. Thanks everyone for your help! — jtrauma, Jan 12 '21 at 13:59

score 0 · Accepted Answer · answered Jan 08 '21 at 07:06

How do you include babel to transpile your code?

object rest/spread properties is a part of ECMAScript 2018 which is not supported by IE. You can use transpilers like Babel. Install @babel/plugin-proposal-object-rest-spread by running:

npm install --save-dev @babel/plugin-proposal-object-rest-spread

Then include it as plugin according to the usage.

You can also refer to this thread and this thread which have similar issues.

The other option is that you can define your own function which you can refer to the accepted answer in this thread.

IE 11 Script1028 on spread within function, tried Array.prototype.push.apply

1 Answers1