I have a rather standard item hydration function that throws "RangeError: Invalid array length". Unfortunately this happens very rarely and in the production so it's hard to catch the input params.

This is the function:

function setProgress(items: SomeType[], id: string, someProperty: string) {
  const index = items.findIndex(item => item.id === id);
  const newItem: SomeType = {...items[index], someProperty };

  return [...items.slice(0, index), newItem, ...items.slice(index + 1); 
}

And this is what is transpiles to (non-uglified):

function setProgress(items, id, someProperty) {
  var index = items.findIndex(function(e) {
      return items.id === id
    }), 
    newItem = Object.assign({}, items[index], {
      someProperty: someProperty
    });
  return items.slice(0, index).concat([newItem], items.slice(index + 1));
}

I've tried playing with different values but I cannot reproduce this error.

Any idea what and how could cause this?

I have a rather standard item hydration function that throws "RangeError: Invalid array length". Unfortunately this happens very rarely and in the production so it's hard to catch the input params.

This is the function:

function setProgress(items: SomeType[], id: string, someProperty: string) {
  const index = items.findIndex(item => item.id === id);
  const newItem: SomeType = {...items[index], someProperty };

  return [...items.slice(0, index), newItem, ...items.slice(index + 1); 
}

And this is what is transpiles to (non-uglified):

function setProgress(items, id, someProperty) {
  var index = items.findIndex(function(e) {
      return items.id === id
    }), 
    newItem = Object.assign({}, items[index], {
      someProperty: someProperty
    });
  return items.slice(0, index).concat([newItem], items.slice(index + 1));
}

I've tried playing with different values but I cannot reproduce this error.

Any idea what and how could cause this?

• javascript
• arrays
• typescript
• array-splice

• 1 Are you sure the error is in this function? "Invalid length" is only raised when you do Array(-1) or .length=-1, neither of which is the case. – georg Commented Mar 28, 2019 at 10:13
• That is what's puzzling me. Chrome reports error on the return line. And this function is part of the reducer so the inputs are quite strictly controlled. – Miroslav Jonas Commented Mar 28, 2019 at 10:15
• When I look at the minified code, the only Array(o) are to be found in angular's reflective-injector and RxJS forkJoin and withLatestFrom. – Miroslav Jonas Commented Mar 28, 2019 at 10:37

2 Answers 2

The problem was in an unhandled corner case when the index is -1. Instead of replacing an element, it would double the size of an array. This would eventually lead to stack overflow and hitting the limit of the array size.

I had this issue occur with the following scenario, while trying to spread an array-like object:

let borken = [...this.state.data.get("tags"), newTag]

// immutablejs toJS() converts the array-like into an array.
let worken = [...this.state.data.get("tags").toJS(), newTag]

A few examples of how to get this error:

// example 1
Array(NaN)

// example 2
let a = []
a.length = a.length  - 1

// example 3 setting .length to > 2^32
let b = [];
b.length = Math.pow(2, 32);

In my case, it was calling the following __spreadArrays:

var __spreadArrays = (undefined && undefined.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};

Where var r = Array(s) and s was NaN