node.jsvue.jswindowconflictgridsome

After upgrading gridsome and node to 18x from 10x ..my build is getting failed "Window is not defined " and running fine on development


After upgrading gridsome and node to 18x from 10x ..my build is getting failed "Window is not defined " and running fine on development. I am using window object at multiple places which was working fine on node 10x version . this issue i am facing with node 18x only.

Error screenshot

tried upgrading gridsome and node versions.


Solution

  • Well, after spending a whopping 72 hours investigating, I discovered that the problem stemmed from the MQ objects from Vue match media (https://github.com/drenglish/vue-match-media) I installed to identify the device my code was running on. However, when working with Gridsome, which generates HTML files at build time by default, the window object was turning up as undefined. Simply removing the MQ object code resolved the issue, and everything started working smoothly.