ReferenceError: document is not defined inside Next.js client component [duplicate] - next.js

Question

This question already has answers here:
Next.js: document is not defined
(9 answers)
Closed 10 days ago.
I have a client component ("use client") created using Next.js
"use client"
import type { ReactPortal } from "react"
import { createPortal } from "react-dom"
interface PortalProps {
children: React.ReactNode
}
export function Portal(props: PortalProps): ReactPortal | null {
return createPortal(props.children, document.body)
}
Whenever I visit the page which uses <Portal /> component it throws an error in the console
event - compiled client and server successfully in 469 ms (1685 modules)
ReferenceError: document is not defined
at Portal (webpack-internal:///(sc_client)/./src/components/portal/portal.component.tsx:9:98)
How can I fix that?
P.S. This is my package.json
// package.json
{
// cut
"next": "13.1.6"
// cut
}

Answer 1

I just found that Client components prerender on the server which doesn't have a access to the document object. That's why it says document is not defined.
There are many options how it can be fixed
Wrap document in typeof window !== undefiend check to make sure the document is only accessible in the browser enrironment (window is undefined during prerender).
Use useEffect + useState + condition
My solution to the problem looks like this
"use client"
import { type ReactPortal, useEffect, useState } from "react"
import { createPortal } from "react-dom"
interface PortalProps {
children: React.ReactNode
}
export function Portal(props: PortalProps): ReactPortal | null {
const [isMounted, setIsMounted] = useState(false)
useEffect(() => {
setIsMounted(true)
}, [])
return isMounted ? createPortal(props.children, document.body) : null // createPortal will not be rendered on the server. Only on the client after hydration
}
See also https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components
Client Components
Client Components enable you to add client-side interactivity to your
application. In Next.js, they are prerendered on the server and
hydrated on the client. You can think of Client Components as how
Next.js 12 and previous versions worked (i.e. the pages/ directory)
See