React-Odometer.js Doesn't Work with Next.js v12 about react-odometerjs HOT 3 CLOSED

Next.js v12 has recently came out, however, it appears that the newest version completely broke this package.

In development mode we're receiving the following error:

transitionCheckStyles = document.createElement('div').style;
  ^

ReferenceError: document is not defined

This error also prevents launching website in production mode.

I have confirmed this issue doesn't exist with Next.js v11.

Hey Shaz

Use This

const [Odometer, setOdometer] = useState(() => () => 0)

useEffect( ()=>{
setOdometer(dynamic(() => import('react-odometerjs') ))
}, [])

from react-odometerjs.

Next.js v12 has recently came out, however, it appears that the newest version completely broke this package.
In development mode we're receiving the following error:

transitionCheckStyles = document.createElement('div').style;
  ^

ReferenceError: document is not defined

This error also prevents launching website in production mode.
I have confirmed this issue doesn't exist with Next.js v11.

Hey Shaz

Use This

const [Odometer, setOdometer] = useState(() => () => 0)

useEffect( ()=>{
setOdometer(dynamic(() => import('react-odometerjs') ))
}, [])

I'm not really OK with importing this library every single time I want to update this component (which is quite often actually). Isn't there better solution than this? I don't want to be stuck on Next.js v11 because of that.

from react-odometerjs.

Actually the solution is super simple, no idea why I didn't think about it before.

Instead of importing it like this (this way is presented in official docs):
const Odo = dynamic(import('react-odometerjs'), { ssr: false, loading: () => 0 });

Import it like this:
const Odo = dynamic(() => import('react-odometerjs'), { ssr: false });

That finally solved my issue!

from react-odometerjs.