React-Date "SingleDatePicker" not working as expected?

Question

I am using react-dates and trying to implement singledatepicker. All the functionality is working but I dont know why all the default styles are gone. I am also using babel "transform-class-properties"

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

const now= moment();
export default class ExpenseForm extends React.Component{
    state={
        description:'',
        note:'',
        amount:'',
        createdAt:moment(),
        calendarFocused:false
    }

    onDateChange = (createdAt)=>{
        this.setState(()=>({createdAt}));
    }
    onFocusChange =({focused})=>{
        this.setState(()=>({calendarFocused:focused}))
    }
    render(){
        return(
            <div>
                <h3>ExpenseForm</h3>
                <form>
                    <SingleDatePicker
                        date={this.state.createdAt}
                        onDateChange={this.onDateChange}
                        focused={this.state.calendarFocused}
                        onFocusChange={this.onFocusChange}
                    />
                </form>
            </div>
        )
    }
}

Here is my Webpack config file and it is loaded with css-loader

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },{
          test: /\.s?css$/,
          use:['style-loader','css-loader','sass-loader']
      }
    ]
},
devtool:'cheap-module-eval-source-map',
devServer:{
  contentBase:path.resolve(__dirname, 'public'),
  historyApiFallback:true
}
};

check if you have css loader in your webpack config. plz provide your webpack config file. — Javed Shaikh, Feb 24 '18 at 11:01
@javed it does not work at all instead it just creates problem on compiling css — Unity Hour, Feb 25 '18 at 12:59

Darko · Accepted Answer · 2018-10-30T09:42:12.423

I had exact the same problem when integration react-dates into my project, and I believe the root cause is that the css module in your project also compile the css of react-dates which leads to missing of the style. To solve this problem, you could modify the rule in your module like:

...your original css module rule
exclude: [
  /node_modules/
]

after applying this rule, you might encounter another issue which is that these css files can't be properly handled due to being excluded, you should then add another css module to handle those css file that you don't want to mess with, for example:

exports.vendorCss = {
  test:    /\.(css|scss|sass)$/,
  include: [/node_modules/],
  loaders: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
    },
  ],
};

and there you have it!! Hope this can help!

React-Date "SingleDatePicker" not working as expected?

1 Answers1