React-datepicker: Uncaught RangeError: locale must contain localize property

[jepz]

Expected behavior

Expect that when adding locale="sv" to it should show Swedish.

Actual behavior

Crashes app and gives error message: Uncaught RangeError: locale must contain localize property....

Steps to reproduce

Packeges: date-fns 2.0.0-beta.2 (yarn add date-fns@next), react-datepicker 2.5.0.
I use registerLocale('sv', sv);

[SaschaDeWaal]

I have exactly the same problem, but with the dutch language (nl).

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

[TimoWestland]

Same here, doesn't matter which locale you choose. Also the error message is very confusing IMO.

[TimoWestland]

Right, I've got it to work. Appearantly the latest version of react-datepicker has a hard dependency on [email protected].

If you install [email protected] and change your locale registration to:

import {es} from 'date-fns/esm/locale'
registerLocale('es', es)

<DatePicker locale="es" />

It works for now. Note the path to import locales from date-fns has changed. The readme of this repo should be updated to reflect this IMO.

Also I don't think it's very clever to release a "stable" version of this package that depends on a beta version of an other package.

Edit: the note about the path is not fully correct, this uses the ES import style. Using this path works as well and uses commonjs import style:
import { es } from 'date-fns/locale'
or
import it from 'date-fns/locale/it'

[pepijnolivier]

@TimoWestland Thanks a bunch!

Seems like things got updated and we're now using "date-fns": "^2.1.0" on "react-datepicker": "^2.9.6".

Also, for the next guy, you'll also need to:
import { registerLocale } from 'react-datepicker';

[awthwathje]

In my case I had cypress installed in the same project, which depends on a very specific version of date-fns ([email protected]).

Just installing the latest date-fns as project's first-party dependency (yarn add date-fns) gave the latest version a precedence and react-datepicker was able to pick it up.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[danielo515]

So, why is this closed? I just installed react-datepicker today and I'm getting this error. I don't have any version of date-fns installed, only the one that cames as dependency with react datepicker:

➜  npm ls date-fns
[email protected] /Users/...spring
└─┬ [email protected]
  └── [email protected] 

So unless this library declares as dependency the wrong library I don't know what else it can be.

[simokhalil]

Faced the same problem today with v3 and figured out that you have to register the locale before importing DatePicker, so doing it in the parent component works.

In the parent component

import fr from 'date-fns/locale/fr';
import { registerLocale } from 'react-datepicker';

registerLocale('fr', fr);

And in the desired (child) component:

import DatePicker from 'react-datepicker';

<DatePicker
  locale="fr"
/>