Next.js v13.4.12 - not working

[nikkizol]

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.

[TrevPennington]

I had to mark the whole component client side with 'use client';

[mclapd]

same issue on Next.js v13.5.3. . Other configuration works but the numbers displayed is all 0

[GreatPotato]

same issue on Next.js v13.5.3. . Other configuration works but the numbers displayed is all 0

Yes same for me on v13.5.4... I think this is related to the App router only as im 99% sure i had it working on a similar project using a page router...

[heyman333]

@GreatPotato @mclapd @nikkizol https://github.com/heyman333/react-animated-numbers/issues/51#issuecomment-1742257182 have you tried this?

[ItzDerock]

marking the whole component as 'use client'; does not work for me, even combined with next/dynamic. I'm guessing that all numbers having translateY(0) is not right.

next v14.0.1

[heyman333]

That's strange. I confirmed that it works as shown in the attached video.

https://github.com/heyman333/react-animated-numbers/assets/22214150/43fb6b18-1a7d-45f5-99f1-c3842aca1e55

version: "next": "13.4.19",

example code

"use client";

import AnimatedNumber from "react-animated-numbers";

export const Number = () => {
  return (
    <AnimatedNumber
      animateToNumber={123132}
      configs={(number, index) => {
        return {
          mass: 1,
          tension: 230 * (index + 1),
          friction: 140,
        };
      }}
    />
  );
};

you don't have to use dynamic import if you use 'use client'

[ItzDerock]

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

[heyman333]

@ItzDerock

Oh, I checked too. I confirmed that using framer-motion solves the problem, I will fix it when I have time. you can refer to https://github.com/heyman333/react-animated-numbers/pull/50

[heyman333]

Updated library to use framer-motion. Please check again with v0.17.0

[Freundschaft]

so for me everything works, but I still get the error:

node_modules\react-animated-numbers\dist\index.js (1:298) @ self
 ⨯ ReferenceError: self is not defined
    at __webpack_require__ (C:\repos\letslnob\.next\server\webpack-runtime.js:33:42)
    at eval (./src/components/animatednumbersdisplay.js:7:80)
    at (ssr)/./src/components/animatednumbersdisplay.js (C:\repos\letslnob\.next\server\app\spenden\page.js:327:1)
    at __webpack_require__ (C:\repos\letslnob\.next\server\webpack-runtime.js:33:42)

I'm on 0.17.1

[DenisStratulat]

I also get this error on 0.17.1 and 0.17.0

[kaiyue-zheng]

same error using "next": "14.1.0", "react": "^18", "react-animated-numbers": "^0.18.0",

[VikasOodles23]

Hi at local its working fine in Next JS 14.1.0 but during build it throws the following error

⨯ node_modules/react-animated-numbers/dist/index.js (1:298) @ self ⨯ ReferenceError: self is not defined

[arxkdev]

Giving me the same error in NEXT JS 14.1.1. ⨯ node_modules/react-animated-numbers/dist/index.js (1:298) @ self ⨯ ReferenceError: self is not defined

[VikasOodles23]

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

[arxkdev]

@VikasOodles23 This worked. Thanks!