Cannot read property 'create' of undefined -- react-dates error

Question

While adding SingleDatePicker from 'react-dates' library, I got this error. Tried everything but couldn't find the error. The code is just to display the calender and display the selected date from the user. Please help! Here is the code:

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

export default class ExpenseForm extends React.Component {
  state = {
    createdAt: moment(),
    calenderFocused: false
  };
  onDateChange = (createdAt) => {
    this.setState(() => ({ createdAt }));
  };

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

  render() {
    return (
      <div>
        <form>
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendcalenderFocused}
            onFocusChange={this.onFocusChange}
          />
        </form>
      </div>
    );
  }
};

The error I am getting in the chrome-dev-tool:

Uncaught TypeError: Cannot read property 'create' of undefined
    at Object.createLTR [as create] (ThemedStyleSheet.js?17e6:46)
    at WithStyles.maybeCreateStyles (withStyles.js?55c9:121)
    at WithStyles.componentWillMount (withStyles.js?55c9:107)
    at callComponentWillMount (react-dom.development.js?cada:6337)
    at mountClassInstance (react-dom.development.js?cada:6393)
    at updateClassComponent (react-dom.development.js?cada:7849)
    at beginWork (react-dom.development.js?cada:8233)
    at performUnitOfWork (react-dom.development.js?cada:10215)
    at workLoop (react-dom.development.js?cada:10279)
    at HTMLUnknownElement.callCallback (react-dom.development.js?cada:540)
The above error occurred in the <withStyles(SingleDatePicker)> component:
    in withStyles(SingleDatePicker) (created by ExpenseForm)
    in form (created by ExpenseForm)
    in div (created by ExpenseForm)
    in ExpenseForm (created by AddExpensePage)
    in div (created by AddExpensePage)
    in AddExpensePage (created by Route)
    in Route (created by AppRouter)
    in Switch (created by AppRouter)
    in div (created by AppRouter)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppRouter)
    in AppRouter
    in Provider

score 13 · Answer 1 · answered Nov 15 '17 at 23:11

13

I got the same error in my tests and adding import 'react-dates/initialize'; fixed it.

Refer to https://github.com/airbnb/react-dates#initialize

answered Nov 15 '17 at 23:11

jeznag

4,183
7
35
53

Thanks, it worked! But now I get the following: `Warning: "NaN" is an invalid value for the "height" css style property.` Did you get that too? – Rafael Quintanilha Mar 15 '18 at 21:53
@RafaelQuintanilha No I didn't. Might need to open a new question for that. – jeznag Mar 15 '18 at 23:10

score 1 · Answer 2 · answered Apr 06 '18 at 04:55

import 'react-dates/initialize';

As of v13.0.0 of react-dates, this project relies on react-with-styles. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to import react-dates/initialize to set up class names on our components.

Ref: https://github.com/airbnb/react-dates

score -3 · Answer 3 · answered Nov 15 '17 at 10:37

You're not initlizing state properly. You should use a constructor, like so:

import React from 'react';
import moment from 'moment';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

export default class ExpenseForm extends React.Component {
  constructor(props){
      super(props);
      this.state = {
         createdAt: moment(),
         calenderFocused: false
      }
  }

  onDateChange = (createdAt) => {
    this.setState(() => ({ createdAt }));
  };

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

  render() {
    return (
      <div>
        <form>
          <SingleDatePicker
            date={this.state.createdAt}
            onDateChange={this.onDateChange}
            focused={this.state.calendcalenderFocused}
            onFocusChange={this.onFocusChange}
          />
        </form>
      </div>
    );
  }
};

I am using babel-plugin-transform-class-properties so no need for constructor() — goku, Nov 15 '17 at 10:39

Cannot read property 'create' of undefined -- react-dates error

3 Answers3