react-datepicker styles are not being not applied on deployed build

Question

I'm using the react-datepicker npm module and its styles got broke (styles are not being applied) when I deploy the build, it's working fine in the local environment.

I've imported its styles like this: import 'react-datepicker/dist/react-datepicker.css';

I found somewhere to import like this: import './../../node_modules/react-datepicker/dist/react-datepicker.css';

It's also not working.

I thought this could be the reason because of SSR so I removed SSR for this component but had no luck with CSR as well.

Current Result

Desired Result

Here is my Component code:

 import React from 'react';
 import DatePicker from 'react-datepicker';

 import calendarIcon from './../../assets/images/calendar-icon.svg';

 import 'react-datepicker/dist/react-datepicker.css';
 // import 'react-datepicker/dist/react-datepicker-cssmodules.min.css';
 import './Datepicker.scss';

 const Datepicker = ({ datepickerClassName, datepickerStyle, 
 selectedDate, datepickerInputClassName, handleChange }) => (
       <div className={`datepicker d-flex align-center 
           ${!!datepickerClassName ? datepickerClassName : ''}`}
           style= {datepickerStyle}
       >
       <span className='d-flex align-center icon-container'>
           <img src={calendarIcon} className='icon' />
       </span>

       <DatePicker
            placeholderText='DD/MM/YYYY'
            dateFormat='dd/MM/yyyy'
            id='start-date'
            autoComplete='off'
            selected={selectedDate}
            className={datepickerInputClassName}
            onChange={handleChange}
        />
    </div>
);

export default Datepicker;

Please help me with this if someone faced this issue or has some idea about this.

Your current and desired results did not import. Could you please edit them in? — NegativeFriction, Nov 20 '19 at 13:10
Why don't you post your code, its seems that some datepicker classes are missing — Muhammad, Nov 20 '19 at 13:12
Looks like this has been addressed on the github. https://github.com/Hacker0x01/react-datepicker/issues/879 There's one solution very similar to what you've tried, but slightly different. Looks like there are two or three other solutions suggested. — NegativeFriction, Nov 20 '19 at 13:21
@NegativeFriction, worked when I import css via "require" instead using "import", but what's the reason behind it didn't worked through import, and also is it correct now to import css via "require"? — Jappreet, Nov 20 '19 at 13:38
Most likely this is a version issue. Older browsers can have issues with the import method, even if you are using something like babel to protect against these issues. I'm not fully versed in it admittedly, but here's another stack overflow thread from people who know more than me: https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x — NegativeFriction, Nov 20 '19 at 17:34
@NegativeFriction, Thanks a lot for the quick responses and guiding me towards right direction to fix the issue. — Jappreet, Nov 21 '19 at 07:17

score 19 · Answer 1 · answered Jul 01 '21 at 07:38

19

Add its style file by

import 'react-datepicker/dist/react-datepicker.css'

answered Jul 01 '21 at 07:38

saeed eivazi

818
1
7
14

At least read the question. He have written it already. – burakarslan May 23 '23 at 09:53

score 15 · Answer 2 · answered May 01 '20 at 12:36

15

You can use CDN, to solve the issue

 <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/react-datepicker/2.14.1/react-datepicker.min.css" />

In Next js, if you want to import css of a Library, use the CDN

answered May 01 '20 at 12:36

Clement Olaniyan

333
2
11

score 12 · Answer 3 · answered Jun 15 '21 at 14:56

I had to import the styling inside application.scss

@import 'react-datepicker/dist/react-datepicker';

The reason the inline import (inside jsx/tsx) works in dev and not other environments is likely because in dev you have extract_css: false (inside config/webpacker.yml) and in other environments it's set to true.

score 4 · Answer 4 · answered Dec 08 '21 at 10:28

4

if you are using Next.js import

import "react-datepicker/dist/react-datepicker.css";

inside your _app.js page it will work.

answered Dec 08 '21 at 10:28

Diego Braga

161
11

score 0 · Answer 5 · answered Mar 29 '23 at 15:04

0

None of these solutions worked for me. I ended up getting it working by adding react-datepicker.js to my styles folder

answered Mar 29 '23 at 15:04

James Goodheart

1

react-datepicker styles are not being not applied on deployed build

5 Answers5