React-datepicker: Error: Cannot find module 'react-datepicker/dist/react-datepicker.css'

[shashankKeshava]

I'm new at react I'm not able to import react-datepicker.css getting Cannot find module error.

This is my source code
form.js

import React from 'react'
import ReactDOM from 'react-dom'
import DatePicker from 'react-datepicker'

require('react-datepicker/dist/react-datepicker.css');

let Form = React.createClass({
    displayName: 'Example',

    getInitialState: function() {
        return {
            startDate: moment()
        };
    },

    handleChange: function(date) {
        this.setState({
            startDate: date
        });
    },

    render: function() {
        return (<div id="parent"><h1>Welcome To Events Page</h1>
          <form>
          Event:<input type="text" name="eventName" placeholder="Event Name"/><br/>
          Date:<DatePicker
            selected={this.state.startDate}
            onChange={this.handleChange} />;
          </form>
          </div>)
    }
});

export default Form;

Folder Structure:

Console:

[rafeememon]

You'll need to configure your module bundler (e.g. webpack, browserify) to handle CSS files, or add the stylesheet to your HTML manually.

[veejai24]

Hi Rafeememon,

Please share some details about adding the css files into webpack and htm manually.

Whenever i am adding the below import to my search.js file.

import 'react-datepicker/dist/datepicker.css'
Date picker is integrated but the style is not applied.
Iam getting the below exception.

Uncaught Error: Cannot find module "react-datepicker/dist/datepicker.css"
at webpackMissingModule (index.js:61718)
at Object.defineProperty.value (index.js:6

Regards,
Vijay