Reputation: 103

Module not found: Can't resolve 'react-datepicker

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.

Upvotes: 7

Answers (8)

Melissa Pastore

Reputation: 21

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

Upvotes: 1

ea0723

Reputation: 806

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.

Upvotes: 0

Burcu Yilmaz

Reputation: 21

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";

Upvotes: 1

kd.

Reputation: 1

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

Upvotes: 0

Sami Ullah

Reputation: 877

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.

Upvotes: 6

Nevin Cleetus

Reputation: 1

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)} />
    );
};

Upvotes: 0