React-dates: Object doesn't support property or method 'from'

[sir-marc]

I get the error message in the title when running my simple application in the IE.
In chrome everything is just fine.
The error points to the dayPicker.js file on line 128 in the function _toConsumableArray(arr).
Any ideas on this?
this is my wrapper component

import React from 'react';
import moment from 'moment';
import { SingleDatePicker, toMomentObject } from 'react-dates';
import toLocalizedDateString from './../../utils/toDateString';
class SingleDatePickerWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.format = 'DD.MM.YYYY';
    this.state = {
      focused: false,
    };
  }

  onDateChange = (date) => {
    this.props.onBlur(toLocalizedDateString(date, this.format));
  }

  onFocusChange = ({ focused }) => {
    this.setState({ focused });
  }


  render = () => {
    const { focused } = this.state;
    let newProps = {};
    if (!this.props.onlyFuture){
      newProps = { ...this.props, isOutsideRange: () => {} };
    } else {
      newProps = { ...this.props };
    }
    return (
      <SingleDatePicker
        {...newProps}
        id="date_input"
        date={toMomentObject(this.props.date, this.format)}
        focusedInput={'endDate'}
        focused={focused}
        displayFormat={'DD-MMM-YYYY'}
        onDateChange={this.onDateChange}
        onFocusChange={this.onFocusChange}
      />
    );
  }
}

[razh]

Babel converts the ES2015 spread operator ([...array]) to the _toConsumableArray helper function.

http://babeljs.io/repl/#?presets=es2015&code=%5B...array%5D

function _toConsumableArray(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { 
      arr2[i] = arr[i]; 
    } 
    return arr2; 
  } else {
    return Array.from(arr); 
  } 
}

This uses ES2015 Array.from which is not available in IE. You can use Babel's polyfill for this:

http://babeljs.io/docs/usage/polyfill/

[ljharb]

Alternatively, you can use https://www.npmjs.com/package/airbnb-js-shims

[JefferyHus]

An easy way is to copy and past the polyfill from here Array.from

[ljharb]

That is definitely not a good idea; the polyfills on mdn are strictly not for production use.

[JefferyHus]

Maybe elaborate and explain why? Because I can't see any security issues with it being used in production.

[ljharb]

It's not about security issues - in general, those polyfills are not necessarily correct (the most important consideration), they're certainly not necessarily compatible with the widest range of browsers, and they're not from npm, which defies best practice entirely (all JS deps you use should come only from npm).

In this specific case, it seems fine, but how can I know that? There's no tests, like are on a proper package. airbnb-browser-shims (which includes es6-shim) includes a well-tested compatible-everywhere Array.from shim, and even babel-polyfill (which includes core-js) has one that's good enough. Why would you want to use the untested unmaintained one from a wiki?

[JefferyHus]

Ah about testing as it's just a single function I think it is fine as it presents no issues for any browsers as well as I tested under different browsers and it works fine. That alternative just for people looking for that one particular function instead of importing a whole package.

[ljharb]

In general, there should be a package for each one function - Array.from is a bit more complex tho.

[JefferyHus]

It is indeed.