Hammer.js: ReferenceError: window is not defined on Main.js

Created on 10 Feb 2020 · 6Comments · Source: hammerjs/hammer.js

im trying to run SSR on my angular8 project but when i run server.js this error happens

`/home/daba/client/dist/server/main.js:288235
})(window, document, 'Hammer');
^

ReferenceError: window is not defined
at Object.yLV6 (/home/daba/client/dist/server/main.js:288235:4)
at __webpack_require__ (/home/daba/client/dist/server/main.js:20:30)
at Object.ZAI4 (/home/daba/client/dist/server/main.js:171354:1)
at __webpack_require__ (/home/daba/client/dist/server/main.js:20:30)
at Object.V7fC (/home/daba/client/dist/server/main.js:161821:10)
at __webpack_require__ (/home/daba/client/dist/server/main.js:20:30)
at Object.K011 (/home/daba/client/dist/server/main.js:125145:37)
at __webpack_require__ (/home/daba/client/dist/server/main.js:20:30)
at Object.0 (/home/daba/client/dist/server/main.js:1251:18)
at __webpack_require__ (/home/daba/client/dist/server/main.js:20:30)
`

i've tried many things but still nothing

Source

f3rixi

😕2 👍1

All 6 comments

I am also facing same issue, can anyone help me here?

kumargauravhcl on 21 Mar 2020

I am also facing same issue, can anyone help me here?

You need to import hammer from main.ts, not directly from the module. That way, it won't be included server side

f3rixi on 21 Mar 2020

Importing hammer from main.ts doesn't work in Angular 9

MikkCed on 21 Mar 2020

👍1

Actually problem is I am not using hammer.js anywhere in my code but one of the node package @ngu/carousel is using hammer which is giving me trouble.

kumargauravhcl on 23 Mar 2020

Lazy is work ok。

I use Nuxtjs：

const Hammer = () => import('hammerjs')

async initHammer () {
      const hammer = await Hammer().then(mod => mod.default || mod)
      const hammerEl = new hammer.Manager(this.$el)
      const Swipe = new hammer.Swipe()

      // Add the recognizer to the manager
      hammerEl.add(Swipe)
      hammerEl.on('swipe', (e) => {
        console.log(e)
      })
}

liaoliaojun on 4 Jun 2020

👍1

Lazy is work ok。

I use Nuxtjs：

const Hammer = () => import('hammerjs')

async initHammer () {
      const hammer = await Hammer().then(mod => mod.default || mod)
      const hammerEl = new hammer.Manager(this.$el)
      const Swipe = new hammer.Swipe()

      // Add the recognizer to the manager
      hammerEl.add(Swipe)
      hammerEl.on('swipe', (e) => {
        console.log(e)
      })
}

Thank you, very helpful!