javascript - Next.js:未定义窗口

Question

我正在尝试将 apexcharts 用于 next.js 应用程序，但它返回给我的窗口未定义。
我很乐意为此提供任何帮助。
有人知道发生了什么以及为什么？

import React from 'react';
import Chart from 'react-apexcharts';

export default class Graficos extends React.Component <{}, { options: any, series: any }> {
    constructor(props:any) {
        super(props);

        this.state = {
            options: {
            chart: {
                id: "basic-bar"
            },
            xaxis: {
                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
            }
            },
            series: [
            {
                name: "series-1",
                data: [30, 40, 45, 50, 49, 60, 70, 91]
            }
            ]
        };
    }
  
    render() {
        return (
            <div className="row">
                <h1>Gráfico Básico</h1>
                <div className="mixed-chart">
                    <Chart
                        options={this.state.options}
                        series={this.state.series}
                        type="bar"
                        width={500}
                    />
                </div>
            </div>
        );
    }
  }

Answer 1

Next.js 的关键特性之一是它可以在服务器上甚至在构建时渲染您的 React 应用程序的一部分。虽然这有助于提高页面的性能，但缺点是服务器不提供应用程序可以在浏览器中访问的所有相同 API。在这种情况下，没有全局 window对象定义。
不幸的是，搜索 apexcharts.js 的源代码会发现许多对 window 的引用。 : https://github.com/apexcharts/apexcharts.js/search?q=window .这也发生在他们的 React 包装器中:https://github.com/apexcharts/react-apexcharts/blob/ecf67949df058e15db2bf244e8aa30d78fc8ee47/src/react-apexcharts.jsx#L5 .虽然似乎没有办法让顶点图避免对 window 的引用，您可以阻止 Next.js 使用服务器上的图表。最简单的方法是包装对代码的任何引用，并检查是否 window被定义，例如

<div className="mixed-chart">
  {(typeof window !== 'undefined') &&
  <Chart
    options={this.state.options}
    series={this.state.series}
    type="bar"
    width={500}
  />
  }
</div>  

使用 apexcharts，您还需要为组件导入执行此操作，因为单独的导入将触发对 window 的引用。如第二个链接所示。为了解决这个问题，您需要使用动态导入，而不是您目前拥有的正常导入:https://nextjs.org/docs/advanced-features/dynamic-import

import dynamic from 'next/dynamic'

const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });