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)


cariforef free commented 2 years ago

Hello, I have the same issue. Thanks for anwsering :-) Didier


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


Grzegorz Bujański staff commented 1 year ago

How can we reproduce this issue?



Yes, it should work! Are you using MDBReact with next.js?


Two Aow priority commented 2 years ago

Yes I am using 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>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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