react-animated-numbers: Next.js v13.4.12 - not working

I import package as it says in doc

import dynamic from "next/dynamic";
const AnimatedNumbers = dynamic(() => import("react-animated-numbers"), {
  ssr: false,
});

my usage:

                  <AnimatedNumbers
                    animateToNumber={item.number}
                    configs={(number, index) => {
                      return {
                        mass: 1,
                        tension: 230 * (index + 1),
                        friction: 140,
                      };
                    }}
                  />

but nothing changes, numbers stay on zero.

About this issue

Original URL
State: closed
Created 9 months ago
Comments: 16 (4 by maintainers)

Most upvoted comments

@arxkdev , I used the following to import and it worked like charm for me

“use client” import dynamic from “next/dynamic”; const AnimatedNumbers = dynamic(() => import(“react-animated-numbers”), { ssr: false, });

and then you can use as normal component

<AnimatedNumbers includeComma transitions={(index) => ({ type: “spring”, duration: index + 0.3, })} animateToNumber={1000} />

VikasOodles23 on Apr 10, 2024

Tried a fresh next.js project with 13.5.1 and it does not work. I get the following error:

 X node_modules/react-animated-numbers/dist/index.js (1:366) @ eval
 X ReferenceError: self is not defined
    at __webpack_require__ (/home/projects/stackblitz-starters-k6zw5j/.next/server/webpack-runtime.js:33:42)
    at eval (./app/Number.tsx:7:80)
    at (ssr)/./app/Number.tsx (/home/projects/stackblitz-starters-k6zw5j/.next/server/app/page.js:151:1)
    at __webpack_require__ (/home/projects/stackblitz-starters-k6zw5j/.next/server/webpack-runtime.js:33:42)
null

I have marked the component as client-only with the "use client"; directive. You can take a look at the project on stackblitz

ItzDerock on Nov 11, 2023

@VikasOodles23 This worked. Thanks!

arxkdev on Apr 10, 2024