React-dates: Always have an error : Failed prop type: Invalid prop `modifiers` of type `Object` supplied to `withStyles(CalendarDay)`, expected instance of `Set`.

[Steffi3rd]

Hi,

The minimum REQUIRED setup seems to not work well... What I missed?

The thing is the calendar seems working but I always have an error in console. I don't know why.
It's the same thing with DateRangerPicker, SingleDatePicker...

Help please

class DatePicker extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      focused: null,
      date: moment(),
    };
  }

  render() {
    return (
      <SingleDatePicker
        date={this.state.date} // momentPropTypes.momentObj or null
        onDateChange={date => this.setState({ date })} // PropTypes.func.isRequired
        focused={this.state.focused} // PropTypes.bool
        onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
      />
    );
  }
}

[majapw]

Can you share what version of react-dates you are using?

[kapor190]

Same here. Version of react-dates: 18.4.0.

[marcos0x]

I have this error: Failed prop type: Invalid prop modifiers.2019-03-01 of type Set supplied to CalendarMonth, expected instance of Set.

[ljharb]

@marcos0x are you polyfilling Set, and can you ensure that you're doing that before any other code (including react-dates) is loaded?

[marcos0x]

@ljharb Yes, I used "airbnb-js-shims"

[ljharb]

and can you confirm that you're importing that before any other code? and that you're not also using babel-polyfill which conflicts?

[marcos0x]

@ljharb yes, a import in first line in index.js before of all imports

[ljharb]

and can you confirm that you’re also not using babel-polyfill in any way, which conflicts?

[marcos0x]

@ljharb no, only airbnb-js-shims

[ljharb]

k - it can sneak in if you’re using any babel settings besides babel-preset-airbnb.

Your propType error strongly implies that the global Set isn’t the same one that was available when the instanceof propType was created (which uses the global Set). Since it’s unlikely that that’d be caused by anything but a non-first-run polyfill, then assuming you’re using the global Set as well, I’m not sure how to debug further :-/

[Tam]

I'm also getting Warning: Failed prop type: Invalid prop 'modifiers' of type 'Object' supplied to 'withStyles(CalendarDay)', expected instance of 'Set'. and Warning: Failed prop type: Invalid prop 'modifiers' of type 'Object' supplied to 'CalendarDay', expected instance of 'Set'.

Working my way up the stacktrace, it appears that the default modifiers prop on the compiled CalendarMonth in lib/ is set to an empty object:

var defaultProps = {
  month: (0, _moment["default"])(),
  // ...
  modifiers: {},
  // ...
  verticalBorderSpacing: undefined
};

I don't know if that's causing the issue or not.

I'm not polyfilling Set in any way, checking typeof Set === "function" and using Firefox's toSource() returns function Set() { [native code] }.

[dfonidata]

Found a solution that worked for me.

https://github.com/airbnb/react-dates/issues/1198#issuecomment-419154768