React-big-calendar: .17 -> .18 initialization

[hunterpankey]

Do you want to request a _feature_ or report a _bug_?

bug

What's the current behavior?

.17 initializes correctly with:

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

and then

BigCalendar.momentLocalizer(moment);

But when I use .18, the BigCalendar variable isn't initialized, so the momentLocalizer method doesn't exist and it throws an error that BigCalendar is undefined. Did something change from .17 to .18 that changed the initialization?

What's the expected behavior?

BigCalendar object should be initialized and ready to render.

Sorry for the relative paucity of details. Given that this issue is with the barest beginning of use, I feel like it's pretty quick to reproduce.

[hunterpankey]

Update:
Typescript 2.4.2
Compiling to es5 target
SPFx yeoman generator for SharePoint

[ggsjyoon]

Same issue here as well.

import BigCalendar from 'react-big-calendar';
import * as moment_timezone from 'moment-timezone';
BigCalendar.momentLocalizer(moment_timezone);

TypeError: Cannot read property 'momentLocalizer' of undefined

EDIT : @arecvlohe I've updated my example code. I rolled back to .17 in the meantime.

[arecvlohe]

Is this still an issue? Seems to work fine with .19.

[ggsjyoon]

I had the issue with .19

[arecvlohe]

@ggsjyoon What is moment_timezone? How are you importing it?

[dsinghvi]

How are you guys dealing with this now ?

[hunterpankey]

I rolled back to .17 in my project and it's going fine. I was inclined to
just leave it because all of the functionality that I need is there, but
I'll try .19 at some point and confirm that we're back to normal.

On Fri, Apr 20, 2018 at 1:03 PM, Deeptanshu Singhvi <
[email protected]> wrote:

How are you guys dealing with this now ?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/intljusticemission/react-big-calendar/issues/781#issuecomment-383159944,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AHm4n_X02N5Oc22j1bIpZ6b6eWCgQeFnks5tqhThgaJpZM4S-w4f
.

[josdejong]

Same issue here using a react+typescript application (create-react-app with react-scripts-ts).

In our case BigCalendar was initialized correctly when in develop mode, but when creating a bundle the variable was undefined.

As a workaround I use require instead of import:

const BigCalendar = require('react-big-calendar')

[ggsjyoon]

I'll try require instead of import on the latest version. I also use react-scripts-ts

EDIT : can confirm. require works and import doesn't. Tested on 0.19.2

[josdejong]

I also use react-scripts-ts

In that case you probably also want to add a tslint ignore line:

// tslint:disable-next-line
const BigCalendar = require('react-big-calendar')

:)

[ggsjyoon]

It's okay. I'm not using no-var-requires.

[Goregut]

Can confirm on 0.19.2 require works. Thanks @josdejong ! We're running react and typescript here as well.

[josdejong]

~Great! I can confirm too that import works in 0.19.2:~

import BigCalendar from 'react-big-calendar'

:+1: thanks guys!

[josdejong]

UPDATE: sorry, turns out it still only works in develop mode, not in production bundles :(

[Distil62]

Same issue :,(

[cjduncana]

Still a problem in v0.20.3

[PeterYangIO]

For me it works in v0.20.3 but does not work in v0.20.4 with a React and TypeScript combination. Did this issue come back for anyone else?

I am importing as such

import * as moment from "moment";
const BigCalendar = require("react-big-calendar");

[ZakRabe]

We've bumped to 0.20.4, and we use this syntax to import the component with the moment localizer, instead of the require syntax.
I haven't tested in a production environment yet. will update if anything comes from it

import * as moment from 'moment';
import BigCalendar, { BigCalendarProps, Navigate } from 'react-big-calendar';
import * as withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop';
const DragAndDropCalendar = withDragAndDrop(BigCalendar);
...
 <DragAndDropCalendar
    localizer={BigCalendar.momentLocalizer(moment)}
/>

[PeterYangIO]

Using the solution that @ZakRabe provided seems to work for me.

[cjduncana]

I just bumped to v0.20.4 and get the following error if I follow @ZakRabe advice:
TypeError: Cannot read property 'momentLocalizer' of undefined

import Calendar, { Components, View } from 'react-big-calendar';

const localizer = Calendar.momentLocalizer(moment);

At least the linting doesn't complain. ¯_(ツ)_/¯