search

bsdfzzzy / vue2-hammer

Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.
MIT License
253 stars 48 forks source link

ReferenceError: window is not defined #39

Open RayonDabre opened 4 years ago

RayonDabre commented 4 years ago

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

bsdfzzzy commented 4 years ago

Why not give a mock window object when in SSR.

RayonDabre commented 4 years ago

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

bsdfzzzy commented 4 years ago

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 commented 4 years ago

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.

@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 commented 4 years ago

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.