react-dates: react-dates breaking after upgrading to version 13.0.0 or 13.0.1

I used:

import "react-dates/initialize";  // <---- put this at the very top of your js file
import React, { Component } from "react";
import { SingleDatePicker } from "react-dates";
import "react-dates/lib/css/_datepicker.css";
import moment from "moment";
.
.
.
class PedidoForm extends Component {
  ...
  render() {
    return (
      .
      .
      .
      <SingleDatePicker
        date={this.state.date} // momentPropTypes.momentObj or null
        onDateChange={date => this.cambiarFecha(date)} // PropTypes.func.isRequired
        focused={this.state.focused} // PropTypes.bool
        onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired
        displayFormat="DD-MM-YYYY"
        firstDayOfWeek={1}
      />
     );
   } 
}

as suggested and it’s working great! Thank you! 😄 (I’m using webpack 3 and React v16)

Hi all!

v13.0.0 included a breaking change that introduced a more CSS in JS solution to the project. There is now an extra setup step which you can see in the README, namely the initialize step (https://github.com/airbnb/react-dates#initialize)

If you run

import 'react-dates/initialize';

at the top of your app, it should (hopefully) work. Let me know if you have any troubles and I will be doing some more debugging of the new protocol today.

I had the same error at first and solved it with import 'react-dates/initialize' at the top of the application. Not a big news I know but : Make sure it’s a the top of the application and not at the top of your component’s file !

So thank you @majapw and @titanve , you provided the right solution but unexperienced programmer may misinterpret it, just like me. Hope this helps.

This seems resolved; be sure to include the “initialize” entry point at the beginning of your application and it should work fine in v13.0.2+.

If you still have trouble, please file a new issue.

@MaxGraey v13.0.2 should fix this (I literally published it seconds ago). Can you try again?

I would recommend pinning to 12.6.0 for now. I will work on this tomorrow or Monday and hope to have a solution for you then!

On Sat, Oct 7, 2017, 8:22 PM Rafael Mora notifications@github.com wrote:

Hello! Did you find a solution for this problem? Thank you

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/airbnb/react-dates/issues/750#issuecomment-334980201, or mute the thread https://github.com/notifications/unsubscribe-auth/ABUdtTkFwGF_PjlUD2yOTSXzbGw0T5L6ks5sqD_ZgaJpZM4PwjLB .

16.2.1 still not working in production

Warning: Failed prop type: The prop 'styles' is marked as required in 'DateRangePicker', but its value is 'undefined'.
    in DateRangePicker (created by withStyles(DateRangePicker))
    in withStyles(DateRangePicker) (created by Datepicker)
    in div (created by Datepicker)
    in Datepicker (created by Toolbar)

This - import ‘react-dates/initialize’; - at the top of the app worked for me.

@titanve I tried your approach, sadly it didn’t work for me. (Even I’m using webpack 3 and React v16)

For now, I’ll stick with version 12.7.0.