window being used outside client side hook leads to server side ReferenceError Next.js 14

[asasvirtuais]

What is the current behavior?

⨯ ReferenceError: window is not defined
GET /page 500

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-use. Paste the link to your JSFiddle or CodeSandbox example below:

https://codesandbox.io/p/devbox/strange-dawn-ngvwfs

'use client'
import { useHash } from 'react-use'

export default function () {
  try {
    useHash()
  } catch (err: any) {
    return <pre>{err.message}</pre>
  }
}

What is the expected behavior? window to be accessed in the client side.

A little about versions:

• OS: ubuntu
• Browser (vendor and version): Chrome
• React: 18.3.1
• react-use: 17.5.1
• Did this worked in the previous package version? Probably not?

[asasvirtuais]

Draft PR: https://github.com/streamich/react-use/pull/2595

[asasvirtuais]

The rabbit hole is deeper than I imagined it'd be. Seems like useEffect would be the right approach to solve this issue with Next.js, but it would completely change the way this works on React only apps.