ReferenceError: window is not defined

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

[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.

[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 https://github.com/hammerjs/hammer.js/issues/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 😊