1

I am developing an app using nextJS and one package that I need to use uses Webfontloader internally. I have installed the library but now the application can't run because of the following error, which I think occurred when nextjs tries to compile an app that makes reference to window on the server-side. Any help would be greatly appreciated.

ReferenceError: window is not defined
  at eval (webpack-internal:///./src/[REDACTED]/node_modules/webfontloader/webfontloader.js:1:711)
  at eval (webpack-internal:///./src/[REDACTED]/node_modules/webfontloader/webfontloader.js:18:103)
  at Object../src/[REDACTED]/node_modules/webfontloader/webfontloader.js (/Users/MyUser/codebase/codepan/[REDACTED]/.next/server/pages/index.js:2941:1)
  at __webpack_require__ (/Users/MyUser/codebase/codepan/[REDACTED]/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///./src/[REDACTED]/lib/Button/ButtonGroup.js:39:22)
  at Object../src/[REDACTED]/lib/Button/ButtonGroup.js (/Users/MyUser/codebase/codepan/[REDACTED]/.next/server/pages/index.js:982:1)
  at __webpack_require__ (/Users/MyUser/codebase/codepan/[REDACTED]/.next/server/webpack-runtime.js:33:43)
  at eval (webpack-internal:///./src/[REDACTED]/lib/Button/index.js:16:20)
  at Object../src/[REDACTED]/lib/Button/index.js (/Users/MyUser/codebase/codepan/[REDACTED]/.next/server/pages/index.js:1015:1)
  at __webpack_require__ (/Users/MyUser/codebase/codepan/[REDACTED]/.next/server/webpack-runtime.js:33:43)
Pila
  • 5,460
  • 1
  • 19
  • 30
  • Does this answer your question? [Window is not defined in Next.js React app](https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app) – juliomalves Aug 03 '21 at 21:32

1 Answers1

0

You can dynamically import this library on client side only like:

const isServer = () => typeof window === 'undefined'

if (!isServer()) {
        import('hammerjs').then(imported => {...})     
})

You can also consider using dynamic imports with no ssr by next.js:

https://nextjs.org/docs/advanced-features/dynamic-import

Nikita Mazur
  • 1,602
  • 1
  • 5
  • 14