Topic: ReferenceError: window is not defined
I am using MDB4 v5.0.1 with React 17.
I am trying to setup a page using the "Double Navigation with fixed SideNav and fixed Navbar" example. I am getting the following error and can't make it work:
ReferenceError: window is not defined at a.isOpen (/Users/jeff/VSCode/next/mdb/node_modules/mdbreact/dist/mdbreact.js:1:347674) at new a (/Users/jeff/VSCode/next/mdb/node_modules/mdbreact/dist/mdbreact.js:1:347785) at processChild (/Users/jeff/VSCode/next/mdb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14) at resolve (/Users/jeff/VSCode/next/mdb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (/Users/jeff/VSCode/next/mdb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (/Users/jeff/VSCode/next/mdb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29) at renderToString (/Users/jeff/VSCode/next/mdb/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27) at Object.renderPage (/Users/jeff/VSCode/next/mdb/node_modules/next/dist/next-server/server/render.js:53:854) at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19) at loadGetInitialProps (/Users/jeff/VSCode/next/mdb/node_modules/next/dist/next-server/lib/utils.js:5:101)
However, the "Double Navigation with hidden SideNav & fixed Navbar" does work. So, it's something specific to the fixed SideNav example.
Any idea what is causing this? Thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Opened
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB4 5.0.1
- Device: MacBook Pro
- Browser: Chrome
- OS: OS X 10.15.7
- Provided sample code: No
- Provided link: Yes
Krzysztof Wilk staff commented 2 years ago
Hi!
Do you use Next.js for your project?
Keep coding!
jkilbride free commented 2 years ago
Yes. The original example uses
componentDidMountandcomponentWillUnmount. I also tried moving the state and window event listeners touseStateanduseEffecthooks, but I'm still getting the error.Krzysztof Wilk staff commented 2 years ago
You can try to move everything with
windowinsidecomponentDidMountoruseEffectwith an empty dependency array. I assume that React is trying to read that while Next is still rendering it.If this solution won't work - could you publish your project on
MDB Goor share it with me? It's hard to say something without a code or config :)Keep coding!
jkilbride free commented 2 years ago
I don't use
MDB Go, but I have two example files I can send you. They are the example from the Docs with theRouterstuff changed forNext.js. One usescomponentDidMountand the other usesuseEffect. Same error either way.Is there somewhere I can send / upload these files? You just need to:
npx create-next-appyarn add ./mdbreact-5.0.1.tgzAnd then add these files to the
/pagesdirectory.Krzysztof Wilk staff commented 2 years ago
I really recommend using our MDB Go to deploy your app, so I can see it. You can check how to do it here: https://mdbootstrap.com/docs/standard/cli/getting-started/ :)
You can also create a sample Github repository or use CodeSandbox :)
Keep coding!
jkilbride free commented 2 years ago
https://github.com/jeff-kilbride/mdbootstrap-next
Also, every time I post here or get an answer, I get six emails from you guys. I don't mind getting one, but six is kind of ridiculous. Can you fix that?
Wojciech Staniszewski staff commented 2 years ago
We will take a look at this problem in the next few days.