Next.js 13 useRef is not a function/failed to load

[carlosmca44]

the server console shows the following error

- error node_modules/next-reveal/dist/cjs/components/RevealWrapper.js (8:34) @ RevealWrapper
- error TypeError: (0 , react_1.useRef) is not a function
    at stringify (<anonymous>)
digest: "4115955940"
null

keep in mind that it is a project where nextjs 13 and reactjs 18 are used

[ritmillio]

Hi @carlosmca44,

Thank you for reaching out with this issue. In the new React 18 architecture, which includes server-side rendering (SSR), using useRef to reference elements from the DOM is no longer possible. To address this, you need to specify 'use client' at the top of the component or page where you intend to use next-reveal in Next.js 13.

I know that using 'use client' means losing the benefits of SSR. In order to work around this limitation, I recommend creating a separate component outside of the pages directory specifically for loading your animations. This way, you can maintain SSR for the rest of the page. This is a dirty quick fix, but until I find a better approach, I suggest trying this workaround. Alternatively, if you have any ideas or suggestions, please feel free to contribute to the lib.