{"action":"created","issue":{"url":"https://api.github.com/repos/airbnb/react-dates/issues/1183","repository_url":"https://api.github.com/repos/airbnb/react-dates","labels_url":"https://api.github.com/repos/airbnb/react-dates/issues/1183/labels{/name}","comments_url":"https://api.github.com/repos/airbnb/react-dates/issues/1183/comments","events_url":"https://api.github.com/repos/airbnb/react-dates/issues/1183/events","html_url":"https://github.com/airbnb/react-dates/issues/1183","id":326324104,"number":1183,"title":"type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.","user":{"login":"Norbo11","id":1637946,"avatar_url":"https://avatars1.githubusercontent.com/u/1637946?v=4","gravatar_id":"","url":"https://api.github.com/users/Norbo11","html_url":"https://github.com/Norbo11","followers_url":"https://api.github.com/users/Norbo11/followers","following_url":"https://api.github.com/users/Norbo11/following{/other_user}","gists_url":"https://api.github.com/users/Norbo11/gists{/gist_id}","starred_url":"https://api.github.com/users/Norbo11/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Norbo11/subscriptions","organizations_url":"https://api.github.com/users/Norbo11/orgs","repos_url":"https://api.github.com/users/Norbo11/repos","events_url":"https://api.github.com/users/Norbo11/events{/privacy}","received_events_url":"https://api.github.com/users/Norbo11/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-05-24T22:52:29Z","updated_at":"2018-05-25T01:32:09Z","closed_at":null,"author_association":"NONE","body":"Hey, I'm trying to use react-dates for the first time, and I'm getting this error.\r\n\r\n`type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.`\r\n\r\nYes, I've included `import react-dates/initialize` at the top of my component.\r\n\r\nBelow is what I've got:\r\n\r\n```\r\nimport 'react-dates/initialize';\r\n// import 'react-dates/lib/css/_datepicker.css';\r\n\r\nimport React from 'react';\r\nimport _ from 'lodash';\r\nimport PropTypes from 'prop-types';\r\nimport moment from 'moment';\r\nimport DateRangePicker from 'react-dates';\r\n\r\nimport { getLastWeekDay } from '../utils/Helpers';\r\nimport { Button } from 'react-bootstrap';\r\n\r\n\r\nclass DateRangeInput extends React.Component {\r\n\r\n    constructor(props) {\r\n        super(props);\r\n\r\n        this.state = {\r\n            focused: null\r\n        };\r\n    }\r\n\r\n    onDatesChange = (startDate, endDate, label) => {\r\n        if (label !== undefined) {\r\n            alert('custom!');\r\n        }\r\n\r\n        this.props.onChange(startDate, endDate);\r\n    };\r\n\r\n    renderDatePresets = () => {\r\n        return _.forOwn(this.props.presets, ([start, end], label) => {\r\n            const isSelected = start.isSame(this.props.startDate) && end.isSame(this.props.endDate);\r\n            return (\r\n                <Button\r\n                    onClick={() => this.onDatesChange(start, end, label)}\r\n                    disabled={isSelected}\r\n                >\r\n                    {label}\r\n                </Button>\r\n            )\r\n        });\r\n    };\r\n\r\n    render() {\r\n\r\n        const {startDate, endDate, onChange} = this.props;\r\n\r\n        return (\r\n            <div>\r\n                <DateRangePicker\r\n                    renderCalendarInfo={this.renderDatePresets}\r\n                    onDatesChange={this.onDatesChange}\r\n                    startDate={startDate}\r\n                    endDate={endDate}\r\n                    startDateId=\"start_date_id\"\r\n                    endDateId=\"end_date_id\"\r\n                    focusedInput={this.state.focused}\r\n                    onFocusChange={focused => this.setState({ focused })}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n\r\nDateRangeInput.propTypes = {\r\n    startDate: (props, propName) => moment.isMoment(propName),\r\n    endDate: (props, propName) => moment.isMoment(propName),\r\n    dateFormat: PropTypes.string.isRequired,\r\n    presets: PropTypes.shape({\r\n        [PropTypes.string]: PropTypes.arrayOf((propValue, key) => moment.isMoment(propValue[key]))\r\n    }).isRequired,\r\n    onChange: PropTypes.func.isRequired,\r\n};\r\n\r\nDateRangeInput.defaultProps = {\r\n    startDate: moment(),\r\n    endDate: moment(),\r\n    dateFormat: 'YYYYMMDD',\r\n    presets: {\r\n        'Today'        : [moment(), moment()],\r\n        'Last week day': [getLastWeekDay(), getLastWeekDay()],\r\n        'Last 7 Days'  : [moment().subtract(6, 'days'), moment()],\r\n        'Last 30 Days' : [moment().subtract(29, 'days'), moment()],\r\n        'This Month'   : [moment().startOf('month'), moment()],\r\n        'Last Month'   : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],\r\n        'This Year'    : [moment().startOf('year'), moment()],\r\n        'Last Year'    : [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],\r\n    }\r\n};\r\n\r\nexport default DateRangeInput;\r\n\r\n```\r\n\r\nAfter browsing some other related issues, I'm pulling my hair out. \r\n\r\nBy the way, do I even need to do `import 'react-dates/lib/css/_datepicker.css`? Babel complains about an invalid token in the CSS file."},"comment":{"url":"https://api.github.com/repos/airbnb/react-dates/issues/comments/391914552","html_url":"https://github.com/airbnb/react-dates/issues/1183#issuecomment-391914552","issue_url":"https://api.github.com/repos/airbnb/react-dates/issues/1183","id":391914552,"user":{"login":"ljharb","id":45469,"avatar_url":"https://avatars1.githubusercontent.com/u/45469?v=4","gravatar_id":"","url":"https://api.github.com/users/ljharb","html_url":"https://github.com/ljharb","followers_url":"https://api.github.com/users/ljharb/followers","following_url":"https://api.github.com/users/ljharb/following{/other_user}","gists_url":"https://api.github.com/users/ljharb/gists{/gist_id}","starred_url":"https://api.github.com/users/ljharb/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ljharb/subscriptions","organizations_url":"https://api.github.com/users/ljharb/orgs","repos_url":"https://api.github.com/users/ljharb/repos","events_url":"https://api.github.com/users/ljharb/events{/privacy}","received_events_url":"https://api.github.com/users/ljharb/received_events","type":"User","site_admin":false},"created_at":"2018-05-25T01:32:09Z","updated_at":"2018-05-25T01:32:09Z","author_association":"MEMBER","body":"Your import of DateRangePicker is wrong - react-dates doesn’t have a default exported component."}}
{"actor":{"display_login":"ljharb"}}