react-countup fails to work in next.js produnction environment

[liuyangjason]

i use react-countup (version 6.5.0) in a page router based next.js application.

when i run pnpm dev, react-countup works well and the number increases to the target value.

when i run 'pnpm start', react-countup fails to work and the number keeps to be zero.

[liuyangjason]

there is a workaround.

Code fails to work in nextjs production mode

         <CountUp
                  start={0}
                  end={10}
                  duration={2.75}
                  separator=" "
                  decimals={0}
                  decimal=","
                  prefix=""
                  suffix=" +"
                >
                  {({ countUpRef }) => (
                    <div>
                      <span ref={countUpRef} />
                    </div>
                  )}
         </CountUp>

Code works in next.js production mode

       <CountUp
                  start={0}
                  end={10}
                  duration={2.75}
                  separator=" "
                  decimals={0}
                  decimal=","
                  prefix=""
                  suffix=" +"
     />

[agyarg]

+1 mine too!

edit: nevermind. i found the solution and explanation:

just add "delay=0":

 <CountUp
              start={0}
              end={count.number}
              duration={3}
              separator="."
              decimal="."
              suffix="+"
              delay={0}
            >
              {({ countUpRef }) => <h4 className="" ref={countUpRef} />}
</CountUp>

and it worked.

[AbhayaShankar]

Does anyone have any idea what if I wanted to render the counter with a delay ? I was using with delay of {1} , and it didn't work in prod

[kimiiz55]

work for me

Currently react-countup is having issues with the enableScrollSpy. A simple work around is to install react-visibility-sensor and use like below.

import VisibilitySensor from 'react-visibility-sensor';

  <CountUp end={400}>
    {({ countUpRef, start }) => (
      <VisibilitySensor onChange={start}>
        <span ref={countUpRef} />
      </VisibilitySensor>
    )}
  </CountUp>

ref: https://stackoverflow.com/questions/73210108/problem-with-react-countup-enablescrollspy

[denandserg]

Confirm that the dev bundle and prod bundle works in a little bit different way. Issue is still actual for production mode. React, Vite bundler