如何在 NextJs 中使用使用 `webfontloader` 的包（服务器端渲染）答案

【问题标题】：How to use a package that uses `webfontloader` in NextJs (Server Side Rendering)如何在 NextJs 中使用使用 `webfontloader` 的包（服务器端渲染）
【发布时间】：2021-10-08 11:02:49
【问题描述】：

我正在使用 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)

【问题讨论】：

这能回答你的问题吗？ Window is not defined in Next.js React app

标签： javascript webpack next.js server-side-rendering webfonts

【解决方案1】：

您只能在客户端动态导入此库，例如：

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

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

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

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

【讨论】：