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

[marchaos]

Describe the bug
We upgraded to v2.20.0 of date-fns which causes "TypeError: Cannot read property 'locale' of null". Hard to trace what actually caused this issue in date-fns - the offending call is this:

getWeek(e,r ? { locale : r } : null)

It looks as though prior to v2.20.0, the second arg to getWeek did not have a default value and now it defaults to {}. Since null is being passed here, that won't use the default value and further down the call stack in getWeek(), it calls getWeekYear() which assumes that options will be defaulted to {} which then causes the error.

TypeError: Cannot read property 'locale' of null

10:03:42       at getWeekYear (../node_modules/date-fns/getWeekYear/index.js:66:24)
10:03:42       at startOfWeekYear (../node_modules/date-fns/startOfWeekYear/index.js:68:33)
10:03:42       at getWeek (../node_modules/date-fns/getWeek/index.js:65:81)
10:03:42       at Se (../node_modules/react-datepicker/dist/index.js:1:6776)
10:03:42       at n.formatWeekNumber (../node_modules/react-datepicker/dist/index.js:1:27625)
10:03:42       at n.renderDays (../node_modules/react-datepicker/dist/index.js:1:27729)
10:03:42       at n.value (../node_modules/react-datepicker/dist/index.js:1:29083)

To Reproduce
Steps to reproduce the behavior:

Seems to be happening when we show the date picker. Worth mentioning that this is happening in our tests (causing failures) which uses react-testing-library and js-dom

Expected behavior
No TypeErrors should occur

• OS: Windows
• Browser js-dom

[mcat95]

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

[viphuangwei]

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

[neerajkhaturia]

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

[mishaseniv]

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

[anthonywebb]

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...

[martijnrusschen]

Did anyone check what changed in v2.20 that breaks the datepicker? Would be happy to accept any PRs that fix the issue.

[marchaos]

Did anyone check what changed in v2.20 that breaks the datepicker? Would be happy to accept any PRs that fix the issue.

Did you read my original comment?

[stephen-p-richard]

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?

[samuelcastro]

Same issue, any feedback?

[toanqc]

We got the same issue in our testing environment on Friday.

The below fix from @mishaseniv works for me as well. If anyone wants the English version just change 'es' to 'enUS'. Hopefully, we will get the fix soon.

import es from 'date-fns/locale/es';
registerLocale('es', es)

<DatePicker
  locale="es"
/>

[stephen-p-richard]

For US English the import is from 'date-fns/locale/en-US' - see https://github.com/date-fns/date-fns/tree/master/src/locale for all the locales.

[stephen-p-richard]

It looks like this should not be a problem in 3.5.0 or higher when date_utils was changed to use date-fns.getISOWeek instead of getWeek, but it would be worth tidying the call at line 200:
return getISOWeek(date, localeObj ? { locale: localeObj } : null);
since getISOWeek only takes a date argument.

[martijnrusschen]

Can someone confirm this works fine in v3.5.0 or higher?

[xrpza]

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

[aaa-paul]

Depending on your situation and which version of react-datepicker you're using (like ^2.7.0) I also found that using a version prior to 2.20.0 for date-fns (like ~2.19.0) will do the trick.

[xameeramir]

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

[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!

[martijnrusschen]

Thanks @kossnocorp!

[hutchy2570]

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

[martijnrusschen]

Closing as this has been fixed.

[augnustin]

Thanks for fixing the issue 🎉 !

As @kossnocorp mentions, it is fixed with date-fns@v2.21.1, but what version of react-datepicker this corresponds to?

Thanks