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
If you’re unable to downgrade your Next.js version and are encountering issues, you can temporarily disable
reactStrictMode
in yournext.config.js
file as a workaround until the problem is fixed. Update your configuration like so:This remains an issue in Next.js 14.
Has a solution been found for next.js14?? Currently experiencing same problem.
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.
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
ofreact
andreact-dom
and moving the page topages
(which uses the user-installed version).it works with next 14
Damn same with me
Next 14.1.4
, this unfortunate, Guess I’ll find another librarysame issue, for me seems to work by adding the “length={1}” props to calendar