如何在NextJs中使用使用`webfontloader`的包(服务端渲染)

Question

我正在开发一个应用程序使用nextJS和一个包，我需要使用内部使用Webfontloader。我已经安装了库，但现在应用程序无法运行，因为出现了以下错误，我认为这是在nextjs尝试编译一个在服务器端引用window的应用程序时发生的。任何帮助都将不胜感激。

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)

Answer 1

您可以在客户端动态导入该库，仅如下所示：

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

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

您还可以考虑通过next.js使用不带ssr的动态导入：

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