next.js: 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

Link to the code that reproduces this issue

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

To Reproduce

Start the application with npm run dev
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

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):

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 6
Comments: 16 (2 by maintainers)

Commits related to this issue

fix: use next 13.4.8 instead of 13.5 because of a bug - bug: https://github.com/vercel/next.js/issues/56206#issuecomment-1740826172 — committed to octavian-regatun/planitly-web by octavian-regatun 9 months ago
fix: :bug: fix calendar by downgrading next https://github.com/vercel/next.js/issues/56206 — committed to lightbluepoppy/expeditask-next by lightbluepoppy 6 months ago

Most upvoted comments

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,
};

+29

nazmulsisil on Oct 20, 2023

This remains an issue in Next.js 14.

ryanhaticus on Jan 16, 2024

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

Kiraadaves on Jan 30, 2024

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.

MyNameIsTakenOMG on Oct 14, 2023

This looks like an upstream issue in React.

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

balazsorban44 on Sep 29, 2023

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

YoucefAllaoua on Apr 2, 2024

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

Jervx on Apr 8, 2024

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

justoverclockl on Jan 31, 2024