Render issues on Next.js 13.5.4 after upgrading from 13.4.12 about react-paginate HOT 37 OPEN

This is working again for me for nextjs >= 14.0.2 😀

from react-paginate.

I tracked it down to a specific commit that broke it.

vercel/next.js@83c18de

It has something to do with the SWC minifier. If you set keep_fnames to false in packages/next/src/build/webpack/plugins/terser-webpack-plugin/src/index.ts then this problem goes away.

keep_fnames (default false) -- Pass true to not mangle function names. Pass a regular expression to only keep function names matching that regex. Useful for code relying on Function.prototype.name.

Workaround
You can add swcMinify: false to your next.config.js file. It will go back to using the Terser minifier, which was the default before v13.

from react-paginate.

@ORizzo

I was having the same issue, and just upgrade the next.js version to 15.5.5 (latest version) solved my issue.

which react-paginate version? still broken here like @JavierMartinz ^

I just updated to [email protected], and trying with both [email protected] and [email protected], and can confirm it is still broken.

from react-paginate.

linked with nextjs update to 13.5.4 (13.5.3 works fine)
vercel/next.js#56406

from react-paginate.

Any update on this issue? Kind of a big problem.

from react-paginate.

Same issue in 13.5.6

swcMinify: false Does the trick but I should not be the solution for the future. Hopefully, there will be a better fix

Disabling SWC Minifer will not be an option in the next major version. Please report any issues you may be experiencing to https://github.com/vercel/next.js/issues

For now it works by disabling the "swcMinify" but it will be removed by Next in the future.

from react-paginate.

Sorry I forgot to send my specs.

Versions:
nextjs - 13.5.5
react-paginate: 8.2

Config:
nextjs.config.js - swcMinify: false.

from react-paginate.

Ya it works fine when I am just running npm run dev, but is broken after a build. So it is something about the build process in 13.5 that is breaking it.

from react-paginate.

I think it is because they changed the defaults for the SWC minifier in 13.5.4, from the default of keep_fnames: false to keep_fnames: true.

I'm honestly not sure why this affects react-paginate, but it does. It at least does explains why it only happens in builds.

from react-paginate.

@camcamcamcam I've had swcMinify: true in my project since day one without issues. It's odd you have to set it to false now, but I guess that's a workaround for now.

Does it affect for performance? since it is SWC thing

from react-paginate.

#504

from react-paginate.

Same issue in 13.5.6

swcMinify: false
Does the trick but I should not be the solution for the future. Hopefully, there will be a better fix

from react-paginate.

Same issue

[email protected]
[email protected]

from react-paginate.

Yes, this also happens to me. Not sure why in development it is rendering correctly though. But on my staging env, it renders like this

this is my code

<ReactPaginate
    className="flex items-center justify-center"
    pageCount={metadata.pageCount}
    forcePage={metadata.page - 1}
    pageRangeDisplayed={1}
    marginPagesDisplayed={1}
    onPageChange={({ selected }) => onPageChange((selected += 1))}
    breakLabel="..."
    breakClassName="h-9 w-9 flex justify-center"
    containerClassName={"wif-pagination"}
    pageClassName="h-9 w-9 flex justify-center items-center ring-1 ring-inset ring-gray-300 -ml-[1px]"
    pageLinkClassName="leading-1"
    activeClassName="bg-wif-orange-2 text-white ring-0"
    previousClassName="relative inline-flex items-center rounded-l-md p-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
    nextClassName="relative inline-flex items-center rounded-r-md p-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
    previousLabel={
      <>
        <span className="sr-only">Previous</span>
        <svg
          className="h-5 w-5"
          viewBox="0 0 20 20"
           fill="currentColor"
           aria-hidden="true"
        >
          <path
            fillRule="evenodd"
            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
            clipRule="evenodd"
          />
        </svg>
      </>
    }
    nextLabel={
      <>
        <span className="sr-only">Next</span>
        <svg
         className="h-5 w-5"
         viewBox="0 0 20 20"
         fill="currentColor"
         aria-hidden="true"
        >
          <path
            fillRule="evenodd"
            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
            clipRule="evenodd"
          />
        </svg>
      </>
    }
  />

from react-paginate.

Same thing happening here!

from react-paginate.

Same issue here.

from react-paginate.

@camcamcamcam I've had swcMinify: true in my project since day one without issues. It's odd you have to set it to false now, but I guess that's a workaround for now.

from react-paginate.

Thanks for creating this issue. I also facing same issue:
Why this happen? Issue happen after upgrade next to version 13.5.4
Here in Dev server:

Here in Prod server:

from react-paginate.

@lutfi-haslab Not in anyway that I have noticed in production, since it is still being minified, just using the pre v13 minifier. The only difference I have noticed, or at least can measure, is that the build take ever so slightly longer.

from react-paginate.

I have this issue in production too. Kind of a big problem for my company.

Next: 13.5.4

from react-paginate.

I faced same issue when I updated Next version to 13.5.4. As a temporary solution, I downgraded Next.js to the previous version. However, this is not an ideal solution. I would appreciate it if the issue could be fixed to work correctly with the new version.

from react-paginate.

I have same issue :)

from react-paginate.

Having the same issue. Had to use this workaround

from react-paginate.

I was able to show it again after downgrade to next 13.5.2 and react-paginate 8.1.4
as mention below
vercel/next.js#56406 (comment)

from react-paginate.

I was having the same issue, and just upgrade the next.js version to 15.5.5 (latest version) solved my issue.

from react-paginate.

It's still broken for v15.5.5 and swcMinify: true.

from react-paginate.

@ORizzo

I was having the same issue, and just upgrade the next.js version to 15.5.5 (latest version) solved my issue.

which react-paginate version? still broken here like @JavierMartinz ^

from react-paginate.

same issue

from react-paginate.

Still exists on [email protected]

from react-paginate.

Same error

from react-paginate.

Same issue in 13.5.6
swcMinify: false Does the trick but I should not be the solution for the future. Hopefully, there will be a better fix

Disabling SWC Minifer will not be an option in the next major version. Please report any issues you may be experiencing to https://github.com/vercel/next.js/issues

For now it works by disabling the "swcMinify" but it will be removed by Next in the future.

This actually works, but I don't know if it affects performance the way nextjs described.

from react-paginate.

same issue

from react-paginate.

Same Issue. I hope it is resolved as soon as possible

from react-paginate.

This is working again for me for nextjs >= 14.0.2 😀

same 🙌

from react-paginate.

facing the same issue.

from react-paginate.

I got the same problem after installing "framer-motion", but after updating next >= 14.0.2 all worked correctly

from react-paginate.

Updating to 14.0.4 solved the problem for me.

from react-paginate.