Topic: Modal is not working. Throws "document is not defined" error
Two Aow priority asked 2 years ago
Expected behavior I expected sample code to work at https://mdbootstrap.com/docs/react/components/modal/
Actual behavior Sample code throws error
Resources (screenshots, code snippets etc.)
ReferenceError: document is not defined
at exports.MDBModal (<mydirectory>node_modules/mdb-react-ui-kit/dist/mdb-react-ui-kit.js:1:244755)
at renderWithHooks (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
at renderIndeterminateComponent (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:5731:15)
at renderElement (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
at renderNodeDestructiveImpl (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
at renderNode (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
at renderChildrenArray (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
at renderNodeDestructiveImpl (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
at renderNodeDestructive (<mydirectory>node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
Solution Republic priority answered 1 year ago
I am getting following error message when rendering that component:
at renderElement (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6005:11)
at renderNodeDestructiveImpl (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderNode (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6259:12)
at renderHostElement (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5642:3)
at renderElement (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5952:5)
at renderNodeDestructiveImpl (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
at renderNodeDestructive (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
at renderForwardRef (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5859:5)
at renderElement (C:\Users\<myproject>\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6005:11) {
digest: undefined
Wojciech Staniszewski staff answered 2 years ago
Yes, it should work! Are you using MDBReact
with next.js?
cariforef free answered 2 years ago
I found a solution, I set a contst in my modal component on the window variable state.
const [isBrowser, setIsBrowser] = useState(false);
useEffect(() => {
setIsBrowser(typeof window !== "undefined");
}, []);
return isBrowser ? (<MDBModal
show={isOpen}
getopenstate={(e: any) => toggleModal(e)}
tabIndex="-1"
>My Modal Content</MDBModal>):<div>loading...</div>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: Mac
- Browser: Chrome
- OS: Monterey
- Provided sample code: No
- Provided link: Yes
cariforef free commented 2 years ago
Hello, I have the same issue. Thanks for anwsering :-) Didier