next.js: react-pagination (and possibly other libs) render incorrectly on PROD only
Link to the code that reproduces this issue
https://github.com/andreiciceu/nextjs-react-paginate-bug
To Reproduce
- setup
yarn install
yarn build
yarn start
- open page
Current vs. Expected behavior
Current (13.5.4): browser console:
(react-paginate): The pageCount prop value provided is not an integer (undefined). Did you forget a Math.ceil()?
Expected (13.5.1):
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
OS: MacOS,Alpine Linux (doesn't seem to be OS related)
Node: v16.19.0
Yarn: 1.22.19
Which area(s) are affected? (Select all that apply)
Not sure
Additional context
This is visible when running the production build only. DEV works ok. Issue present on both Pages and App Router, and with or without dynamic (no SSR rendering). Downgrading to 13.5.1 solves the problem
About this issue
- Original URL
- State: closed
- Created 9 months ago
- Reactions: 19
- Comments: 43 (1 by maintainers)
It has something to do with the SWC minifier. If you set
keep_fnames
tofalse
inpackages/next/src/build/webpack/plugins/terser-webpack-plugin/src/index.ts
then this problem goes away.So this is why it works in dev, but not prod.
Workaround You can add
swcMinify: false
to your next.config.js file. (I’m not sure if you can pass options to the SWC minifier directly, but that would be nice)Same issue. Tried to hardcode pageCount, but didn’t help. Had to downgrade to 13.5.3
We basically rewrote our own and didn’t have the worst time. Bonus is no dependencies.
Implementation
Downgrading to 13.5.3 resolved.
"react-paginate": "^8.1.3",
to:
"react-paginate": "8.1.3",
It works for me
Same issue with next 14.0.0 and react-paginate 8.1.5
@Ishfaque-techno I have same issue with this versions. I solve this issue with downgrade react-paginate version to 8.2.0 -> 8.1.3 this is working on both mode dev and prod.
To resolve this issue, downgrade to
react-paginate@8.1.3
. You can do this by using the following commands:Using Yarn:
Or using npm:
Alternatively, you can manually update your package.json file. Change:
to:
without the ^ symbol. After making this change, run:
or
Note: I’m using
"next": "13.5.4"
in this configuration.To solve this problem, use the following versions: “react-paginate”: “8.1.3”, “next”: “13.5.6”,
and delete the symbol next to the version value “^”
Hello, Same issue here.
Downgrading to React Paginate v8.1.3 has hotfixed this for me too.
I’m using Next v14.0.1
tqs it worked
Thanks @camcamcamcam , I can confirm that setting swcMinify to false worked for me on Next.js 13.5.5
ok Thanks.
On Wed, Dec 20, 2023 at 1:42 PM Riyaz Hossain @.***> wrote:
This also worked for me, thanks:
I was able to remove the
swcMinify: false
workaround that I had used previously.Another lib impacted is
npm i simple-crypto-js@legacy
(which install v2.5.1) (legacy is needed to support browsers without native crypto module per readme of the lib).The error that happens in prod is
TypeError: can't access property "sqrt", Math is undefined
.Setting
swcMinify: false
in next 14.0.2 however it warns that in next 15 this option is gone.I’m also having this issue with
"next": "14.0.1"
,"react-paginate": "8.2.0",
. Upgrading"next": "14.0.2"
worked for me.Downgrading to react-paginate@8.1.3 works.
Current Next.js version = 12.3.6
Same issue
next@13.5.6 react-paginate@8.2.0
The issues seems to have started at this commit