React DatePicker no working in next.js because of css import

Question

I'm trying to use react-date-picker in a next.js project.

I started with first installing the package: npm install react-date-picker

Then in my _app.js file I've added:

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

Then in one of my custom components I'm trying to use the date picker:

import DatePicker from "react-date-picker";

const [dateValue,setDateValue] = useState(new Date());

<DatePicker value={dateValue} onChange={setDateValue} />

When I run the app and try to navigate to the page that contains the date picker i get the following error:

I've followed the documentation but I'm still getting an error and I don't know how to fix it.

Answer 1

enter image description here

Next.js do not allow components from node_modules to import styles. You'll need to custom styling.

https://github.com/wojtekmaj/react-date-picker#custom-styling