Topic: ReferenceError: window is not defined

jkilbride free asked 3 years ago


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!


Krzysztof Wilk staff commented 3 years ago

Hi!

Do you use Next.js for your project?

Keep coding!


jkilbride free commented 3 years ago

Yes. The original example uses componentDidMount and componentWillUnmount. I also tried moving the state and window event listeners to useState and useEffect hooks, but I'm still getting the error.


Krzysztof Wilk staff commented 3 years ago

You can try to move everything with window inside componentDidMount or useEffect with 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 Go or share it with me? It's hard to say something without a code or config :)

Keep coding!


jkilbride free commented 3 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 the Router stuff changed for Next.js. One uses componentDidMount and the other uses useEffect. Same error either way.

Is there somewhere I can send / upload these files? You just need to:

npx create-next-app

yarn add ./mdbreact-5.0.1.tgz

And then add these files to the /pages directory.


Krzysztof Wilk staff commented 3 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 3 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 3 years ago

We will take a look at this problem in the next few days.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • 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