ReferenceError: navigator is not defined

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

14.17.1

What browser are you using?

chrome,mozilla

What operating system are you using?

windows

How are you deploying your application?

vercel

Describe the Bug

export default function Editor() {
> 4 |   let abc= navigator;
    |           ^
  5 |   return (<>
  6 |   {JSON.stringify(abc)}
  7 |   </>)

Expected Behavior

Just run normally

To Reproduce

Create a file say editor.js

export default function Editor() {
  let abc= navigator;
  return (<>
  { JSON.stringify(abc) }
  </>)
}

Just run and open this page in browser

same will happen for window

It will result to ReferenceError: navigator is not defined

If you direct access then also it will show error

[ihmpavel]

Try loading the library with dynamic imports on client side.

https://stackoverflow.com/questions/66291720/import-peerjs-to-nextjs

[ihmpavel]

Hi,

you are accessing window and navigator on server. These variables are undefined there. I suggest reading official docs.

Checking this article or this article or Googling.

The easiest solution will be wrapping window/navigator in useEffect() to run it only on the client side and not on server.