I'm trying to use the blueprint DateInput component and I've followed the documentation to the teeth but I just can't get it to work. I would appreciate your help if you have a second!
Here is my code:
import React from 'react';
import * as moment from 'moment';
import { DateInput } from '@blueprintjs/datetime';
class SupplierPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.state = {
closeOnSelection: true,
date: null,
disabled: false,
format: FORMATS[0],
reverseMonthAndYearMenus: false,
timePrecision: undefined,
};
}
render() {
const { date, format, ...spreadProps } = this.state;
return (
<div>
<DateInput
{...spreadProps}
{...format}
defaultValue={new Date()}
className="foofoofoo"
popoverProps={{ popoverClassName: 'barbarbar', content: 'hi' }}
inputProps={{ className: 'bazbazbaz' }}
/>
</div>
);
}
}
export const FORMATS = [
{
formatDate: (date) => (date == null ? '' : date.toLocaleDateString()),
placeholder: 'JS Date',
parseDate: (str) => new Date(Date.parse(str)),
},
momentFormatter('MM/DD/YYYY'),
momentFormatter('YYYY-MM-DD'),
momentFormatter('YYYY-MM-DD HH:mm:ss'),
];
function momentFormatter(format) {
return {
formatDate: (date) => moment(date).format(format),
placeholder: `${format} (moment)`,
parseDate: (str) => moment(str, format).toDate(),
};
}
And here is the error:
warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Blueprint2.Overlay`.
in Blueprint2.Overlay (created by Blueprint2.Popover)
in span (created by Manager)
in Manager (created by Blueprint2.Popover)
in Blueprint2.Popover (created by Blueprint2.DateInput)
in Blueprint2.DateInput (created by SupplierPage)
in div (created by SupplierPage)
in SupplierPage (created by Connect(SupplierPage))
in Connect(SupplierPage) (created by withReducer(Connect(SupplierPage)))
in withReducer(Connect(SupplierPage)) (created by Route)
in Route (created by App)
in Switch (created by App)
in div (created by App__AppWrapper)
in App__AppWrapper (created by App)
in App
in Router (created by ConnectedRouter)
in ConnectedRouter
in IntlProvider (created by LanguageProvider)
in LanguageProvider (created by Connect(LanguageProvider))
in Connect(LanguageProvider)
in Provider
printWarning @ warning.js:33
warning @ warning.js:57
createElement @ ReactElementValidator.js:190
(anonymous) @ overlay.js?fe9b:93
mapSingleChildIntoContext @ ReactChildren.js:105
traverseAllChildrenImpl @ traverseAllChildren.js:75
traverseAllChildren @ traverseAllChildren.js:170
mapIntoWithKeyPrefixInternal @ ReactChildren.js:125
mapChildren @ ReactChildren.js:147
Overlay.render @ overlay.js?fe9b:82
(anonymous) @ ReactCompositeComponent.js:793
measureLifeCyclePerf @ ReactCompositeComponent.js:73
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:792
_renderValidatedComponent @ ReactCompositeComponent.js:819
_updateRenderedComponent @ ReactCompositeComponent.js:743
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
receiveComponent @ ReactCompositeComponent.js:544
receiveComponent @ ReactReconciler.js:122
updateChildren @ ReactChildReconciler.js:107
_reconcilerUpdateChildren @ ReactMultiChild.js:204
_updateChildren @ ReactMultiChild.js:308
updateChildren @ ReactMultiChild.js:295
_updateDOMChildren @ ReactDOMComponent.js:944
updateComponent @ ReactDOMComponent.js:758
receiveComponent @ ReactDOMComponent.js:720
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
receiveComponent @ ReactCompositeComponent.js:544
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
receiveComponent @ ReactCompositeComponent.js:544
receiveComponent @ ReactReconciler.js:122
_updateRenderedComponent @ ReactCompositeComponent.js:751
_performComponentUpdate @ ReactCompositeComponent.js:721
updateComponent @ ReactCompositeComponent.js:642
performUpdateIfNecessary @ ReactCompositeComponent.js:558
performUpdateIfNecessary @ ReactReconciler.js:154
runBatchedUpdates @ ReactUpdates.js:148
perform @ Transaction.js:141
perform @ Transaction.js:141
perform @ ReactUpdates.js:87
flushBatchedUpdates @ ReactUpdates.js:170
closeAll @ Transaction.js:207
perform @ Transaction.js:154
batchedUpdates @ ReactDefaultBatchingStrategy.js:60
batchedUpdates @ ReactUpdates.js:95
dispatchEvent @ ReactEventListener.js:145
invariant.js:42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TransitionGroup`.
at invariant (invariant.js:42)
at instantiateReactComponent (instantiateReactComponent.js:72)
at Object.updateChildren (ReactChildReconciler.js:115)
at ReactDOMComponent._reconcilerUpdateChildren (ReactMultiChild.js:204)
at ReactDOMComponent._updateChildren (ReactMultiChild.js:308)
at ReactDOMComponent.updateChildren (ReactMultiChild.js:295)
at ReactDOMComponent._updateDOMChildren (ReactDOMComponent.js:944)
at ReactDOMComponent.updateComponent (ReactDOMComponent.js:758)
at ReactDOMComponent.receiveComponent (ReactDOMComponent.js:720)
at Object.receiveComponent (ReactReconciler.js:122)
Am I missing something obvious? I've scoured through every available resource on the web but no luck :(
