I'm trying to use date picker in a MERN tutorial, but it fails to compile because it can't resolve 'react-datepicker'. I've rm -rf node_modules and datepicker to no avail.

component.js

import axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

package.json

 "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-datepicker": "^2.5.0",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1"
  },

I'm wondering if the version (2.10.0) I've installed is somehow not compatible with something... when I installed there were no err or missing required dependencies.

I'm trying to use date picker in a MERN tutorial, but it fails to compile because it can't resolve 'react-datepicker'. I've rm -rf node_modules and datepicker to no avail.

component.js

import axios from 'axios';
import DatePicker from 'react-datepicker';
import "react-datepicker/dist/react-datepicker.css";

package.json

 "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-datepicker": "^2.5.0",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",
    "react-scripts": "3.0.1"
  },

I'm wondering if the version (2.10.0) I've installed is somehow not compatible with something... when I installed there were no err or missing required dependencies.

• javascript
• reactjs
• datepicker

• Have you checked in your node modules folder to see if that file is actually there? There's a Github post with that error, but it says that this issue was fixed in v2.9.3, and you're using a later version: github.com/Hacker0x01/react-datepicker/issues/1882 – Jayce444 Commented Nov 18, 2019 at 23:02
• Yep, it's there. Just realized I put the wrong v though, 6.12.0. – Natasha Commented Nov 18, 2019 at 23:09

8 Answers 8

I have resolved this problem Type npm install react-datepicker --save in terminal on local environment or on production

Then import these in your component

import DatePicker from "react-datepicker"; used this in component where i need date-picker

import "react-datepicker/dist/react-datepicker.css"; used this app.js

it worked for me.

import DatePicker from 'react-datepicker/dist/react-datepicker';

Use this. The same problem occurred with my code too, and this worked.

Go and check react-date-picker folder in node_modules.

Mine was not react-datepicker..

So importing should be;

import DatePicker from "react-date-picker";
import "react-date-picker/dist/DatePicker.css";

Following this suggestion to also install @types/react-datepicker fixed this issue in a TypeScript app I'm working on.

Good grief.
'../react-datepicker';

Thanks for helping me rubber duck!

None of the above code snippet worked for me.. But the below snippet worked fine in my react application.

https://github.com/Hacker0x01/react-datepicker/issues/879

import React, {useEffect, useState} from "react";
import DatePicker from "react-datepicker"
import "react-datepicker/src/stylesheets/datepicker.scss";

export default function SimpleClassDatePicker() {
    const [startDate, setStartDate] = useState(new Date());

    return (
      <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
    );
};

"npm i react-date-picker" It works for me ."npm i react-date-picker"not "npm i react-datepicker"

For me, everything worked in local, but when I deployed to heroku, I received the error module not found. After investigating, turned out react-datepicker was in devDependencies in package.json vs in dependencies.

Moved this and it solved my problem.