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

[Havock94]

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!

[stephenscaff]

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

[rajmahil]

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.

[stephenscaff]

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.