Cannot read property 'momentLocalizer' of undefined - React Big Calendar

Question

In my project I am trying to initialize react-big-calendar but it's saying that it doesn't exist.

Uncaught TypeError: Cannot read property 'momentLocalizer' of undefined

my package versions: "react-dom": "16.2.0", "react-big-calendar": "^0.20.1", "moment": "^2.22.2",

Does anyone have any solutions to these problems?

I know that there was such a problem, but it concerned an older version that did not require an localizer.

import * as React from 'react';
import BigCalendar from 'react-big-calendar';
import * as moment from 'moment';


class CalendarContainer extends React.Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        const localizer = BigCalendar.momentLocalizer(moment);
        return (
            <>
                <BigCalendar localizer={localizer} events={events} />
            </>
        );
    }
}

export default CalendarContainer;

Answer 1

I had the same problem:

import moment from 'moment';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import 'react-big-calendar/lib/css/react-big-calendar.css';
const localizer = momentLocalizer(moment);

class CalendarContainer extends React.Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <>
                <Calendar localizer={localizer} events={events} />
            </>
        );
    }
}

export default CalendarContainer;

Answer 2

You might want to try pulling your localizer out of the render.

import * as React from 'react';
import BigCalendar from 'react-big-calendar';
import * as moment from 'moment';

const localizer = BigCalendar.momentLocalizer(moment);

class CalendarContainer extends React.Component {
    constructor(props: any) {
        super(props);
    }

    render() {
        return (
            <>
                <BigCalendar localizer={localizer} events={events} />
            </>
        );
    }
}

export default CalendarContainer;

Answer 3

You can try below code...

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