heyman333/react-animated-numbers

error - ReferenceError: self is not defined while running in Next.js

venkateshpullaganti opened this issue · 4 comments

venkateshpullaganti commented

Hi,

Thank you for the awesome library. I loved it. 🤩

I am running into an issue while using in next.js. Could you help?

at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:101:18) at Object.react-animated-numbers (/Users/venky/Wealthy/goku/.next/server/pages/index.js:1568:18) at __webpack_require__ (/Users/-----/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///.

jedwardblack commented

@venkateshpullaganti You have to use dynamic imports to only import this library on the client side. Import the library like this:

import dynamic from 'next/dynamic'
const AnimatedNumbers = dynamic(() => import('react-animated-numbers'), {
  ssr: false,
})
  • 👍7
heyman333 commented

@venkateshpullaganti Try editing it as @jedwardblack said.
Thank @jedwardblack

  • 🎉3
venkateshpullaganti commented

@venkateshpullaganti Try editing it as @jedwardblack said. Thank @jedwardblack

@venkateshpullaganti You have to use dynamic imports to only import this library on the client side. Import the library like this:

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

It worked. Thank you. 🤝

JohnGale87 commented

I think that this should be added to the readme, I just ran into the same issue.

  • 👍2