Render issues on Next.js 13.5.4 after upgrading from 13.4.12 #501

camcamcamcam · 2023-10-06T20:13:23Z

Bumped up my version of Next.js to silence a vulnerability notice, and after doing so react-paginate no longer works correctly. Getting around it for now by locking my version to 13.4.12, but not a fan of this solution.

Expected behaviour (on 13.4.12):

<ul class="pagination col-span-full gap-3 flex justify-center font-bold my-16" role="navigation" aria-label="Pagination">
   <li class="previous disabled"><a class="h-full flex items-center rotate-180 mr-5 " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev"><img alt="Previous Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
   <li class="selected"><a rel="canonical" role="button" class="flex font-black" tabindex="-1" aria-label="Page 1 is your current page" aria-current="page">1</a></li>
   <li><a rel="next" role="button" class="flex" tabindex="0" aria-label="Page 2">2</a></li>
   <li><a role="button" class="flex" tabindex="0" aria-label="Page 3">3</a></li>
   <li><a role="button" class="flex" tabindex="0" aria-label="Page 4">4</a></li>
   <li class="break"><a role="button" tabindex="0" aria-label="Jump forward">...</a></li>
   <li><a role="button" class="flex" tabindex="0" aria-label="Page 13">13</a></li>
   <li class="next"><a class="h-full flex items-center ml-5" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next"><img alt="Next Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
</ul>

What happens (on 13.5.4):

<ul class="pagination col-span-full gap-3 flex justify-center font-bold my-16" role="navigation" aria-label="Pagination">
   <li class="previous disabled"><a class="h-full flex items-center rotate-180 mr-5 " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev"><img alt="Previous Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <li class="break"><a role="button" tabindex="0" aria-label="Jump forward">...</a></li>
   <ul role="navigation" aria-label="Pagination">
      <li class="previous disabled"><a class=" " tabindex="-1" role="button" aria-disabled="true" aria-label="Previous page" rel="prev">Previous</a></li>
      <li class="next"><a class="" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next">Next</a></li>
   </ul>
   <li class="next"><a class="h-full flex items-center ml-5" tabindex="0" role="button" aria-disabled="false" aria-label="Next page" rel="next"><img alt="Next Page" loading="lazy" width="15" height="9" decoding="async" data-nimg="1" class="inline-block" style="color: transparent;" src="/_next/static/media/icon-arrow-right.0ababecc.svg"></a></li>
</ul>

Here is the JS of one of the pages that has pagination, if that helps. All instances of ReactPaginate on this site are experiencing this.

import { useEffect, useState } from 'react';
import NextImage from 'next/image';
import ReactPaginate from 'react-paginate';

// assets
import iconArrowRight from '@/images/icon-arrow-right.svg';

// components
import EventList from '@/components/Event/EventsList';

export default function PaginatedEvents({ data }) {
  // pagination
  const [itemOffset, setItemOffset] = useState(0);

  // Simulate fetching items from another resources.
  // (This could be items from props; or items loaded in a local state
  // from an API endpoint with useEffect and useState)
  const events = data;

  const itemsPerPage = 6;
  const endOffset = itemOffset + itemsPerPage;
  const pageCount = Math.ceil(events.length / itemsPerPage);
  const currentEvents = events.slice(itemOffset, endOffset);

  // Invoke when user click to request another page.
  const [currentPage, setCurrentPage] = useState(0);
  const handlePageClick = (event) => {
    setCurrentPage(event.selected);
    const newOffset = (event.selected * itemsPerPage) % events.length;
    setItemOffset(newOffset);
  };

  const Pagination = () => (
    <ReactPaginate
      onPageChange={handlePageClick}
      pageRangeDisplayed={4}
      marginPagesDisplayed={1}
      pageCount={pageCount}
      forcePage={currentPage}
      pageLinkClassName='flex'
      activeLinkClassName='font-black'
      breakLabel='...'
      nextLinkClassName='h-full flex items-center ml-5'
      nextLabel={
        <NextImage
          src={iconArrowRight}
          className='inline-block'
          alt='Next Page'
        />
      }
      previousLinkClassName='h-full flex items-center rotate-180 mr-5'
      previousLabel={
        <NextImage
          src={iconArrowRight}
          className='inline-block'
          alt='Previous Page'
        />
      }
      renderOnZeroPageCount={null}
      className={'pagination col-span-full gap-3 flex justify-center font-bold my-16'}
    />
  );

  useEffect(() => {
    const eventList = document.getElementById('event-list');
    window.scrollTo({
      top: eventList.scrollTop,
      behavior: 'smooth',
    });

  }, [currentPage]);

  return (
    <div className='event-list' id='event-list'>
      <Pagination />
      <EventList events={currentEvents} />
      <Pagination />
    </div>
  );
}

martinharyanto · 2023-10-07T02:37:05Z

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>
      </>
    }
  />

camcamcamcam · 2023-10-07T17:06:34Z

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.

dawsnap · 2023-10-07T19:25:29Z

Same thing happening here!

extralsc · 2023-10-08T17:32:10Z

Same issue here.

nabtron · 2023-10-08T22:22:59Z

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

jnovak-SM2Dev · 2023-10-10T16:57:04Z

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

camcamcamcam · 2023-10-10T21:42:22Z

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.

jnovak-SM2Dev · 2023-10-10T21:45:59Z

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

camcamcamcam · 2023-10-10T21:58:54Z

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.

lutfi-haslab · 2023-10-13T04:06:23Z

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:

lutfi-haslab · 2023-10-13T04:09:38Z

@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

camcamcamcam · 2023-10-13T23:56:46Z

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

camcamcamcam · 2023-10-14T01:04:35Z

#504

sadaffathali · 2023-10-16T07:42:04Z

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

Next: 13.5.4

erfan-amani · 2023-10-16T07:53:25Z

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.

sabamohamadi · 2023-10-16T08:42:27Z

I have same issue :)

ronmicha · 2023-10-16T08:52:12Z

Having the same issue. Had to use this workaround

lutfi-haslab · 2023-10-17T13:00:56Z

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)

ORizzo · 2023-10-18T13:54:43Z

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

JavierMartinz · 2023-10-18T15:45:53Z

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

maiconcarraro · 2023-10-18T20:21:48Z

@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 ^

camcamcamcam · 2023-10-18T20:35:49Z

@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 next@15.5.5, and trying with both react-paginate@8.2.0 and react-paginate@8.1.5, and can confirm it is still broken.

ORizzo · 2023-10-18T22:45:42Z

Sorry I forgot to send my specs.

Versions:
nextjs - 13.5.5
react-paginate: 8.2

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

E1NSER · 2023-10-24T05:52:12Z

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

tdn352001 · 2023-10-26T09:29:27Z

same issue

Jasermon · 2023-10-26T11:27:07Z

Same issue

next@13.5.6
react-paginate@8.2.0

JakubBlazity · 2023-10-27T10:50:49Z

Still exists on next@14.0.0

E1NSER · 2023-10-29T05:57:02Z

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.

timomedia · 2023-10-31T04:48:09Z

Same error

timomedia · 2023-10-31T04:49:29Z

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.

balcieren · 2023-11-03T11:06:10Z

same issue

wlgns2223 · 2023-11-09T01:55:54Z

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

saifbechan · 2023-11-10T11:52:14Z

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

maiconcarraro · 2023-11-10T13:53:13Z

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

same 🙌

nadeem-golflan · 2023-11-16T11:03:47Z

facing the same issue.

Vitaurus · 2023-12-01T06:27:27Z

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

jvdhr · 2024-01-11T16:33:08Z

Updating to 14.0.4 solved the problem for me.

camcamcamcam mentioned this issue Oct 7, 2023

Warning - The pageCount prop value provided is not an integer #495

Open

nguyenhoaikhang37 mentioned this issue Oct 8, 2023

Submission for assignment 5 nguyenhoaikhang37/df-frontend-2023#5

Open

camcamcamcam mentioned this issue Oct 31, 2023

render issue on next@13.5.4 #506

Closed

mpark63 mentioned this issue Mar 25, 2024

Fix react-paginate UI bug with temporary workaround uCredit-Dev/ucredit_frontend_typescript#584

Merged

Render issues on Next.js 13.5.4 after upgrading from 13.4.12 #501

Render issues on Next.js 13.5.4 after upgrading from 13.4.12 #501

Comments

camcamcamcam commented Oct 6, 2023 • edited

martinharyanto commented Oct 7, 2023 • edited

camcamcamcam commented Oct 7, 2023

dawsnap commented Oct 7, 2023

extralsc commented Oct 8, 2023

nabtron commented Oct 8, 2023

jnovak-SM2Dev commented Oct 10, 2023

camcamcamcam commented Oct 10, 2023

jnovak-SM2Dev commented Oct 10, 2023

camcamcamcam commented Oct 10, 2023

lutfi-haslab commented Oct 13, 2023

lutfi-haslab commented Oct 13, 2023

camcamcamcam commented Oct 13, 2023

camcamcamcam commented Oct 14, 2023

sadaffathali commented Oct 16, 2023

erfan-amani commented Oct 16, 2023 • edited

sabamohamadi commented Oct 16, 2023

ronmicha commented Oct 16, 2023 • edited

lutfi-haslab commented Oct 17, 2023

ORizzo commented Oct 18, 2023 • edited

JavierMartinz commented Oct 18, 2023

maiconcarraro commented Oct 18, 2023 • edited

camcamcamcam commented Oct 18, 2023

ORizzo commented Oct 18, 2023 • edited

E1NSER commented Oct 24, 2023 • edited

tdn352001 commented Oct 26, 2023

Jasermon commented Oct 26, 2023

JakubBlazity commented Oct 27, 2023

E1NSER commented Oct 29, 2023

timomedia commented Oct 31, 2023

timomedia commented Oct 31, 2023

balcieren commented Nov 3, 2023

wlgns2223 commented Nov 9, 2023

saifbechan commented Nov 10, 2023

maiconcarraro commented Nov 10, 2023

nadeem-golflan commented Nov 16, 2023

Vitaurus commented Dec 1, 2023 • edited

jvdhr commented Jan 11, 2024

camcamcamcam commented Oct 6, 2023 •

edited

martinharyanto commented Oct 7, 2023 •

edited

erfan-amani commented Oct 16, 2023 •

edited

ronmicha commented Oct 16, 2023 •

edited

ORizzo commented Oct 18, 2023 •

edited

maiconcarraro commented Oct 18, 2023 •

edited

ORizzo commented Oct 18, 2023 •

edited

E1NSER commented Oct 24, 2023 •

edited

Vitaurus commented Dec 1, 2023 •

edited