React-datepicker: React.createElement: type should not be null, undefined, boolean, or number.

[raelgc]

I'm trying to use this component in my React/flux app, but in the page I'm including:

    const DatePicker = require("react-datepicker"),

My component is using it this way:

<DatePicker name="date_from" className="form-control" onChange={this._handleInputChange} selected={this.state.date_from}/>

CSS is manually included in the page and moment is already installed.

I'm facing these 2 issues in the console (page is rendered blank):

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `ModeratorContributionsFilter`.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `ModeratorContributionsFilter`.
    at invariant (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:56306)
    at instantiateReactComponent (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:54460)
    at instantiateChild (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:41168)
    at traverseAllChildrenImpl (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:54927)
    at traverseAllChildren (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:55015)
    at Object.instantiateChildren (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:41191)
    at ReactDOMComponent._reconcilerInstantiateChildren (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:48820)
    at ReactDOMComponent.mountChildren (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:48857)
    at ReactDOMComponent._createInitialChildren (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:43995)
    at ReactDOMComponent.mountComponent (react-bundle.self-d0c5a997473231c7ada90a9417641418d7948a18ac34f2c2741cc2370d9b17a6.js:43841)

Page works if I remove DatePicker and replace it by a simple input type="date"

[rafeememon]

Can you use the debugger to see what's being imported by the require? You may need to use .default

[raelgc]

I just saw it's entering the react-datepicker.min.js. Is there a way I can see in the non minified version?

[rafeememon]

I don't think that's necessary, you can inspect what is assigned to DatePicker in your code. Did you try using .default, i.e.

const DatePicker = require('react-datepicker').default;

It should work OOTB for import statements but you may need to jump through that hoop for requires

[raelgc]

Using .default make it works! What is the purpose of this option?

[rafeememon]

Unfortunately it's an artifact of having a build that works with both ES6-style imports and commonjs-style requires. We prefer using the default export of react-datepicker with an import statement but .default exists for compatibility with commonjs.