react-datepicker: v2.20.0 of date-fns seems to break react-datepicker

Boy, aren’t the 739,604 who downloaded and installed it this week in for a surprise when their production apps all hard crash the page when someone focuses on a date picker field…

Faced with the same issue, the solution works for me - has been added locale for DatePicker component. E. g.

import { registerLocale } from  "react-datepicker";
import es from 'date-fns/locale/es';
registerLocale('es', es)

<DatePicker
  locale="es"
/>

We encountered the same issue today. "v2.20.0 of date-fns seems to break react-datepicker ". it would crash the whole page.

Can confirm, after removing node_modules, package-lock.json and doing a clean npm install, version 2.20.0 of date-fns gets installed and we can reproduce this crash

We are facing the exact same issue. Please provide any temporary fix till we have a permanent solution. Thanks.

Can confirm date-fns@v2.21.1 has fixed this for us. Thanks @kossnocorp!

We’ve shipped date-fns@v2.21.1 with a fix for this problem. We’ve rolled back usage of the default argument value syntax for options. We will reintroduce that in v3, but as a breaking change this time. Sorry for the trouble, everyone!

It looks like there is another break related to passing an existing date to the “selected” parameter as a string in the DatePicker component: Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use "parseISO" to parse strings. See: https://git.io/fjule

date-fns getWeekOfYear has changed to use TypeScript and now its options var is set up like this:

var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

whereas before 2.20 it was this:

var options = dirtyOptions || {};

So since datepicker is passing null when locale is absent, the second argument isn’t undefined and var locale = options.locale; in getWeekOfYear with null options is causing the TypeError.

Perhaps date-fns should be encouraged to add the truthy check back in?

With "date-fns": "^1.30.1" and "react-datepicker": "^2.0.0", the following worked for me:

import React, { useEffect } from "react";
import DatePicker, { registerLocale } from "react-datepicker";
import enGB from "date-fns/locale/en";


// REACT HOOK
const MyDatePicker = () => {
    useEffect(() => {
        registerLocale("en", enGB);
    }, []);

    return (
        <DatePicker
            locale={'en'}
        />
    );
};

// React Component
class MyDatePickerComponent extends React.Component {
    componentDidMount() {
        registerLocale("en", enGB);
    }
    render() {
        return (
            <DatePicker
                locale={'en'}
            />
        );
    }
}