Problem
It's a popular problem when working with Next; Let's use the following example: We are trying to create a modal component, but we get stuck on "document is not defined" error in console :(
"use client";
import { createPortal } from "react-dom";
interface ModalProps {
open: boolean;
}
const Modal = ({ open }: ModalProps) => {
return (
open &&
createPortal(
<>
<div className="modal-dialog">
<h1>Modal</h1>
</div>
<div className="modal-backdrop"></div>
</>,
document.body
)
);
};
export default function Home() {
return <Modal open={true} />;
}
Fix #1
Should work in any component, both user made, and from any library/UI Kit
const ClientOnlyWrapper = ({ children }) => {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return <>{isClient ? children : null}</>;
};
const WrappedModal = () => {
return(
<ClientOnlyWrapper>
<Modal />
<ClientOnlyWrapper/>
)
}
Fix #2
Which is included in latest releases of MDB UI Kits, which you can check out here. You don't need to do anything apart from importing it from MDB package:
return (
{
<MDBClientOnly>
<MDBModal />
</MDBClientOnly>
}
)