ReferenceError: window is not defined

[RayonDabre]

In the contest of SSR, getting error as ReferenceError: window is not defined.
Any suggestion to make it SSR compatible?

[bsdfzzzy]

Why not give a mock window object when in SSR.

[RayonDabre]

@bsdfzzzy Any suggestion on this? Hammer.js also uses document, not sure how to spoof that.

[bsdfzzzy]

Many third partern use window or document. So you should set default mock window and mock document and even more mock object to make it work. I remember Mozilla has an open source library to solve these issues. You can try to find it out.

[iancleary]

Hello @RayonDabre @bsdfzzzy,

I'm currently learning about Vue, Gridsome, and have been doing some searching trying to better handle touch events in a Gridsome application where I believe it's build process behaves similar to SSR. I also wasn't sure how to mock the different objects. I tried a few different loader packages null-loader and others to try to patch how hammerjs loads, but I didn't get a solution.

• See Hammer.js fails in node since window is undefined  hammerjs/hammer.js#930 for attempts at patches from others on GitHub.

@RayonDabre I'm not familiar with what @bsdfzzzy was alluding to regarding Mozilla, but perhaps you can try using vue2-touch-events. I got gridsome build to work without any issues. From a brief comparison, it seems the lack of the hammerjs dependency allows vue2-touch-events to build properly. I'm making an assumption that is a similar application to SSR, so please

I hope that helps.

@bsdfzzzy For non SSR applications, I really enjoyed the little time I spent with vue2-hammer when I was just doing local live development with yarn develop. Thank you 😊

[sebj54]

I also use Gridsome and encountered this issue.

You'll find the solution I found below. In your main.js file:

export default function(Vue, { isClient }) {
    if (isClient) {
        const { VueHammer } = require('vue2-hammer')
        Vue.use(VueHammer)
    }
}

@bsdfzzzy Mocking document or window does not help (I tried) because hammerjs has its own scope when it is imported or required. Parent scope where you could mock such objects is not accessible.