Functions and buttons from react-big-calendar don't work in next 13.4.9 and upwards but work in 13.4.8 and earlier

[octavian-regatun]

Link to the code that reproduces this issue

https://github.com/octavian-regatun/nextjs-react-big-calendar-with-bug

To Reproduce

1. Start the application with npm run dev
2. Try to click any of the buttons from the home page in the toolbar (BACK, NEXT, MONTH, WEEK, DAY, etc.)

Current vs. Expected behavior

Following the steps from the previous section, I expected the buttons to work, but I observed that no button is working.

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 18.16.0
  npm: 9.6.6
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 13.5.4-canary.6
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

I tested my reproduction against different next releases and the first one that introduced the bug was "13.4.9-canary.3", since reverting to "13.4.9-canary.2" works.

The bug can be reproduced only with npm run dev. With npm run build && npm run start everything works as expected even on "13.4.9-canary.3" and upwards

You can check the working and the non-working repositories here (the code is the same, the only difference is the next version):

• with bug: https://github.com/octavian-regatun/nextjs-react-big-calendar-with-bug
• without bug: https://github.com/octavian-regatun/nextjs-react-big-calendar-without-bug

[balazsorban44]

This looks like an upstream issue in React.

The related PR is https://github.com/vercel/next.js/pull/52282

For context, the App Router bundles its own version of React to expose new APIs for framework authors not yet on the latest release channel.

You can verify this is a React issue by installing 0.0.0-experimental-7118f5dd7-20230705 of react and react-dom and moving the page to pages (which uses the user-installed version).

[valenciaHQ]

Hi! Any update on this? I'm getting the same.

[MyNameIsTakenOMG]

I was using nextjs 13.5.4, the latest version for my project. still not working. Then downgraded to 13.4.8 following the suggestion of @octavian-regatun , and then it worked👍 Hopefully, this little issue could be fixed soon.

[nazmulsisil]

If you're unable to downgrade your Next.js version and are encountering issues, you can temporarily disable reactStrictMode in your next.config.js file as a workaround until the problem is fixed. Update your configuration like so:

const nextConfig = {
  reactStrictMode: false,
};

[abdulhussain156]

@nazmulsisil disabling strict mode works fine, but when switching to month view, it does not show the days, it is totally blank

[ryanhaticus]

This remains an issue in Next.js 14.

[justoverclockl]

any news on that?

[Kiraadaves]

Has a solution been found for next.js14?? Currently experiencing same problem.

[justoverclockl]

same issue, for me seems to work by adding the "length={1}" props to calendar

[stwr8]

Any news?

[A-Yucel]

Hi everyone, I had the same issue while using next.js 14. I managed to solve it by implementing the toolbar myself, atleast for the views part. Basically I used react state and buttons to change this state for the corresponding view. Also you should disable the toolbar with toolbar={false}. <DragAndDropCalendar selectable localizer={localizer} events={events} style={{ height: 800 }} defaultView={Views.MONTH} view={currentView} views={allViews} onSelectSlot={handleSelectSlot} onEventDrop={handleEventDrop} onEventResize={handleEventResize} toolbar={false} />

[YoucefAllaoua]

If you're unable to downgrade your Next.js version and are encountering issues, you can temporarily disable reactStrictMode in your next.config.js file as a workaround until the problem is fixed. Update your configuration like so:

const nextConfig = {
  reactStrictMode: false,
};

it works with next 14

[isafranco13]

For my project with next 14 is not working using const nextConfig = { reactStrictMode: false, }; someone has the same issue?

[Jervx]

Damn same with me Next 14.1.4, this unfortunate, Guess I'll find another library

[houssembalti]

If you're unable to downgrade your Next.js version and are encountering issues, you can temporarily disable reactStrictMode in your next.config.js file as a workaround until the problem is fixed. Update your configuration like so:

const nextConfig = {
  reactStrictMode: false,
};

it works with next 14

i implemented big-react-calendar in a starter , at first buttons doesnt work but when i disabled strictmode, everything works fine

next: "14.1.4"

[justoverclockl]

If you're unable to downgrade your Next.js version and are encountering issues, you can temporarily disable reactStrictMode in your next.config.js file as a workaround until the problem is fixed. Update your configuration like so:

const nextConfig = {
  reactStrictMode: false,
};

it works with next 14

i implemented big-react-calendar in a starter , at first buttons doesnt work but when i disabled strictmode, everything works fine

next: "14.1.4"

actually this not work for me....

[tfptmaster]

It works for me but I believe this is not the best solution cuz React Strict Mode is a helpful tool for identifying potential problems in an application; it does things like checking for deprecated methods, ensuring components follow best practices, and more. While turning it off can fix some immediate issues, it might mask underlying problems that could cause complications later.

[areeb-baqai]

Hi everyone in your component where you call react-big-calendar first do

const [date, setDate] = useState(new Date());
  const onNavigate = useCallback(
    (newDate: Date) => {
      return setDate(newDate);
    },
    [setDate],
  );

then, in Calendar props please pass

 <Calendar
    onNavigate={onNavigate}
    onView={onView}
   date={date} />

along with other props it works for me

[handersonc]

@areeb-baqai your workaround works for Today, back and next buttons but the Views menu (Month, Week, etc.) remains not working doing only that. So, adding the onView prop with a new state to set the view manually is another solution and the good thing you don't need to disable reactStrictMode. I tested it out using "next": "14.2.3"

The code.

'use client'

import 'react-big-calendar/lib/css/react-big-calendar.css'
import { Calendar, View, Views, dayjsLocalizer } from 'react-big-calendar'
import dayjs from 'dayjs'
import React, {
  ReactElement,
  useCallback,
  useState
} from 'react'
const events = [
  {
    start: new Date('2024-05-20'),
    end: new Date('2024-05-25'),
    title: 'Some title'
  },
  {
    title: 'DTS STARTS',
    start: new Date(2024, 4, 13, 11, 0, 0),
    end: new Date(2024, 4, 14, 2, 0, 0)
  }
]

dayjs().format()

const localizer = dayjsLocalizer(dayjs)

export default function Home () {
  const [view, setView] = useState<View>(Views.MONTH)

  const handleOnChangeView = (selectedView: View) => {
    setView(selectedView)
  }

  const [date, setDate] = useState(new Date())
  const onNavigate = useCallback(
    (newDate: Date) => {
      return setDate(newDate)
    },
    [setDate]
  )

  return (
    <Calendar
      date={date}
      onNavigate={onNavigate}
      localizer={localizer}
      events={events}
      view={view}
      defaultView={Views.MONTH}
      views={['month', 'week', 'day', 'agenda']}
      showMultiDayTimes
      style={{ height: 700, width: 700 }}
      onView={handleOnChangeView}
    />
  )
}

[Shanmugavadivelu7]

hi folks, is there any solution yet? In my case I am unable to find the week and day tabs working. I have made reactstrictmode as false yet I am getting the error

`Unhandled Runtime Error TypeError: d[("get" + method)] is not a function

Call Stack Module.eval node_modules\date-arithmetic\index.js (282:1) isJustDate node_modules\react-big-calendar\dist\react-big-calendar.esm.js (161:10) Object.startAndEndAreDateOnly node_modules\react-big-calendar\dist\react-big-calendar.esm.js (270:1) eval node_modules\react-big-calendar\dist\react-big-calendar.esm.js (3864:1) Array.forEach

TimeGrid.render node_modules\react-big-calendar\dist\react-big-calendar.esm.js (3860:1)` above , please guide me through. Thank you

[SyedAbdullahAhmed]

Hi everyone, I had the same issue while using next.js 14. I managed to solve it by implementing the toolbar myself, atleast for the views part. Basically I used react state and buttons to change this state for the corresponding view. Also you should disable the toolbar with toolbar={false}. <DragAndDropCalendar selectable localizer={localizer} events={events} style={{ height: 800 }} defaultView={Views.MONTH} view={currentView} views={allViews} onSelectSlot={handleSelectSlot} onEventDrop={handleEventDrop} onEventResize={handleEventResize} toolbar={false} />

I first do toolbarFalse and then remove this props, now it totally works fine

[fadlikadn]

@areeb-baqai your workaround works for Today, back and next buttons but the Views menu (Month, Week, etc.) remains not working doing only that. So, adding the onView prop with a new state to set the view manually is another solution and the good thing you don't need to disable reactStrictMode. I tested it out using "next": "14.2.3"

The code.

'use client'

import 'react-big-calendar/lib/css/react-big-calendar.css'
import { Calendar, View, Views, dayjsLocalizer } from 'react-big-calendar'
import dayjs from 'dayjs'
import React, {
  ReactElement,
  useCallback,
  useState
} from 'react'
const events = [
  {
    start: new Date('2024-05-20'),
    end: new Date('2024-05-25'),
    title: 'Some title'
  },
  {
    title: 'DTS STARTS',
    start: new Date(2024, 4, 13, 11, 0, 0),
    end: new Date(2024, 4, 14, 2, 0, 0)
  }
]

dayjs().format()

const localizer = dayjsLocalizer(dayjs)

export default function Home () {
  const [view, setView] = useState<View>(Views.MONTH)

  const handleOnChangeView = (selectedView: View) => {
    setView(selectedView)
  }

  const [date, setDate] = useState(new Date())
  const onNavigate = useCallback(
    (newDate: Date) => {
      return setDate(newDate)
    },
    [setDate]
  )

  return (
    <Calendar
      date={date}
      onNavigate={onNavigate}
      localizer={localizer}
      events={events}
      view={view}
      defaultView={Views.MONTH}
      views={['month', 'week', 'day', 'agenda']}
      showMultiDayTimes
      style={{ height: 700, width: 700 }}
      onView={handleOnChangeView}
    />
  )
}

This works for me. Thanks! using next 14.2.4