React-big-calendar: Cannot read property 'momentLocalizer' of undefined

[raptor1989]

In my project I am trying to initialize react-big-calendar but it's saying that it doesn't exist.
my package versions: "react-dom": "16.2.0", "react-big-calendar": "^0.20.1", "moment": "^2.22.2",
Why I can't use the solution below? Something was changed in version 0.20?
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));
Because:
Property 'setLocalizer' does not exist on type 'typeof BigCalendar'.
And
Property 'localizer' is missing in type '{ events: any[]; }'.
Does anyone have any solutions to these problems?

[KartikShankhavaram]

You should just use

BigCalendar.momentLocalizer(moment)

instead of

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

[raptor1989]

Ok, but but then I just got the error:
Cannot read property 'momentLocalizer' of undefined

[dmitrykrylov]

@raptor1989 how do you import BigCalendar?

[PzYon]

I get the same error using following dependencies:

• "react-big-calendar": "0.20.2"
• "@types/react-big-calendar": "0.20.1"
• "typescript": "3.1.6"

I import BigCalendar as follows:
import BigCalendar from "react-big-calendar";

And then use it like this:
const momentLocalizer = BigCalendar.momentLocalizer(moment);

Error:
Uncaught (in promise) TypeError: Cannot read property 'momentLocalizer' of undefined

[seblondono]

Did anyone actually find a solution to this issue? I just ran into the same problem.

[moghammed]

This seems to be a mismatch in versions between the types and the code. You can get it working by importing with:
import * as BigCalendar from 'react-big-calendar'

and then just use it like normally
BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

But typescript will complain about everything and the only solution I can currently provide for that is removing react-big-calendar from your @types.

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

[Hiroki111]

@moghammed

import * as BigCalendar from 'react-big-calendar'

BigCalendar.setLocalizer(BigCalendar.momentLocalizer(moment));

That approach resulted in "Could not find a declaration file for module 'react-big-calendar'." :(

[Hiroki111]

I see the wontfix lable, so will this bug not be fixed?

[TrySound]

@Hiroki111

1. There is not setLocalizer anymore. You should pass localizer to Calendar prop
2. It's typescript issue. This project does not provide types.

[Hiroki111]

@TrySound

Thank you for your comment, but...

"It's typescript issue. This project does not provide types."

I'm not sure what you exactly meant, because I can see the types of react-big-calendar provided in its index.ds.ts.

Also, as the OP reported, calling momentLocalizer still results in the error even though it's compiled.

i.e. "Cannot read property 'momentLocalizer' of undefined"

This function ("momentLocalizer") exists as per the attached image above, so I don't see how it happens

[TrySound]

@Hiroki111 This project does not maintain external typings. @types/react-big-calendar is not official part of this project.
https://github.com/Hiroki111/bigcalendar-test/blob/master/package.json#L9

This project does not distribute any index.d.ts
https://unpkg.com/[email protected]/

[raoufswe]

changing the import from import BigCalendar from "react-big-calendar"; to import { Calendar, momentLocalizer } from "react-big-calendar"; has fixed the problem in my case.