ReferenceError: window is not defined on Main.js

[f3rixi]

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

[kumargauravhcl]

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

[f3rixi]

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

[MikkCed]

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

[kumargauravhcl]

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.

[liaoliaojun]

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)
      })
}

[denishm116]

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!

[michael-harley]

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)
      })
}

Thanks for the solution!
I use React and NextJS and this is my solution in case anyone needs it.

const importHammerJs = () => import("hammerjs");

function Component(){
  // ...
  useEffect(() => importHammperJs(), []);
  // ...
  return (
    // ...
  )
}

[vonxq]

Thanks for the solution ! Here is a hooks solution in case anyone needs it.

import { useEffect, useState } from "react";

const importHammerJs = () => import("hammerjs");

// https://github.com/hammerjs/hammer.js/issues/1245
export const useHammer = () => {
    const [hammer, setHammer] = useState(null as any);
    
    useEffect(() => {
        initHammer()
    }, []);

    const initHammer = async () => {
        const Hammer = await importHammerJs();
        setHammer(Hammer);
    }
    return hammer;
}