Modal is not working. Throws document is not defined error

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

Add comment

Solution Republic priority answered 1 year ago

0 0 Best answer

<p>I am getting following error message when rendering that component:</p>

<pre class="prettyprint"><code>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) {
</code></pre>

<p>digest: undefined</p>

Please insert min. 20 characters.

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?

Add comment

Wojciech Staniszewski staff answered 2 years ago

0 0 Best answer

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

Two Aow priority commented 2 years ago

Yes I am using Next Js

Add comment

cariforef free answered 2 years ago

1 0 Best answer

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>

Add comment

Write

Create snippet

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

Two Aow

0Support score
14Questions 4Answers 0Snippets