Question

我有一个私有的NPM软件包，该软件包在Next.js项目中使用。这两个项目都是React，Typescript项目。

我最近在NPM项目中添加了一个图形，现在遇到了以下问题： NPM软件包中对window的所有调用都在Next.js项目中引发错误window is undefined

由于我使用的是我无法控制的库来构建图形，因此我无法将if (typeof window !== "undefined")语句中的对窗口的调用包装起来。 / p>

在我甚至调用使用图形库的组件之前，我在构建Next.js项目时都会遇到这些错误。在我的主要项目中仅包含我的NPM软件包会导致出现这些错误。

是否可以仅针对特定图形库或整个NPM包停止服务器端渲染？

或者，欢迎任何其他解决方案，无论多么疯狂。

Answer 1

考虑到您提到的约束。我认为没有太多选择。在window环境中，您根本没有node对象。

您可以在可能进行SSR的页面的其他部分进行渲染。并且您可以使用ssr: false动态渲染由于window对象而无法进行SSR的部分。

import dynamic from 'next/dynamic'

// wrap your component that uses the graph lib.
const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/myGraphComponent'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

参考：

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

Answer 2

也许您可以尝试动态导入您的图形导入

禁用next.js服务器端呈现以防止出现窗口未定义错误

2 个答案: