0

我有 2 个存储库，一个包含我的所有组件，这些组件被打包并上传到私人提要，一个使用它们。两个 repos 都使用 React 和 TS 以及使用包的 repo 也运行 Next.js

我在组件仓库中使用 Plottable.js 和 D3 构建了一个图表组件。

在将我的包的最新版本安装到我的主仓库后，我收到构建错误，说，

ReferenceError: window is not defined
    at Object.StiW (...\source\repos\njs-app\.next\serverless\pages\post.js:47656:19)
    at __webpack_require__ (...\source\repos\njs-app\.next\serverless\pages\post.js:23:31)

转到它提到的第一行：

var nativeArray = window.Array;

对呈现图形的函数的调用以及我在生成图形的函数中对窗口的唯一调用

export const ChartComponent = ({data, currentValue}: PlotProps) => {
    const makeBasicChart = () => {
        ...
        ...
        ...
        if (typeof window !== "undefined") {
            window.addEventListener("resize", () => plots.redraw());
        }
    }

    React.useEffect(() => {
        makeBasicChart();
    });

    return (
        <ChartContainer id="Chart"/>
    );
}

我收到这些错误，甚至没有在页面上包含组件。

我正在使用 TS 编译器编译我的组件存储库，tsc并且在包含图表组件之前没有任何问题。

我需要做什么来解决这个问题？

4

2 回答 2

0

在 SSR 窗口上不可用，因为它是基于浏览器的属性，所以它给出错误。

您可以通过这样做来避免该错误。

if (process.browser) {
   // Your window based work. 
}

对于基于 D3 的工作，您可以在 dom 准备好后启动。更好地使用 useEffect

于 2020-08-16T15:00:26.410 回答
0

在调用它之前检查窗口是否已定义

Next.js 呈现服务器端，因此这意味着没有窗口对象。您应该在此检查中包装任何使用 window 的代码

if (typeof window !== "undefined") {
  // code that uses window
}

Window 也将在任何时候安装组件时存在，因此您可以在诸如onClick钩子之类的操作中使用窗口useEffect

于 2020-08-16T14:53:52.733 回答