Cannot read properties of null (reading 'style') on app refresh

[Luca]

Hello,
I'm having an issue that randomly appears while refreshing my app.
The error is

Uncaught TypeError: Cannot read properties of null (reading 'style') at (index.umd.js?5799:209:1)

    var animateOuterCursor = React.useCallback(function (time) {
      if (previousTimeRef.current !== undefined) {
        coords.x += (endX.current - coords.x) / trailingSpeed;
        coords.y += (endY.current - coords.y) / trailingSpeed;
        cursorOuterRef.current.style.top = "".concat(coords.y, "px");   //cursorOuterRef.current.style is null, hence the error
        cursorOuterRef.current.style.left = "".concat(coords.x, "px");
      }

My app.js returns the following component

return (
	<ThemeProvider>
		<DotRing />
		...
	</ThemeProvider>

and the DotRing component simply returns

return (
	<AnimatedCursor
		innerSize={10}
		outerSize={12}
		color={ cursorColor }
		innerAlpha={1}
		outerAlpha={0.2}
		innerScale={0.7}
		outerScale={2}
	/>
);

Do you have any idea on how to fix this?
Thank you!

[Stephen Scaff]

Hi, sorry for delay i responding. Guess I've been pretty heads down on work stuff.

I've can't seem to replicate this. Can you give me more info on your environment, or ideally, share a reduced test case?

Thanks

[Raj Mahil]

Hey,

I had a similar issue. Are you using Next.js with dynamic importing for the cursor? If so, try importing through a regular import statement. That seemed to work for me.

[Stephen Scaff]

When I originally built this, using with Next required a dynamic import. But I refactored to make that not needed (hopefully).
But a refactor after that probably reintroduced the dynamic import requirement - probably from the useEventListener hooks's default to window.

So, use a dynamic import for now.

In app.js / app.tsx

const AnimatedCursor = dynamic(() => import('react-animated-cursor'), {
  ssr: false
})

I can look at removing this requirement though.