Next.js: window 未定义

Question

我正在尝试将 apexcharts 用于 next.js 应用程序，它返回给我 window 未定义。

我希望得到任何帮助。

有人知道发生了什么以及为什么吗？

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. This also occurs in their React wrapper: https://github.com/apexcharts/react-apexcharts/blob/ecf67949df058e15db2bf244e8aa30d78fc8ee47/src/react-apexcharts.jsx#L5。虽然似乎没有办法让 apexcharts 避免引用 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 的引用，如第二个 link 所示。为了解决这个问题，您需要使用动态导入而不是您当前拥有的正常导入：https://nextjs.org/docs/advanced-features/dynamic-import

import dynamic from 'next/dynamic'

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

Answer 2

if (typeof window !== "undefined") {
    host = window.location.host;
    console.log("host--------------", host);
  }

Next.js: window 未定义

Next.js: window is not defined

javascript

typescript

reactjs

next.js

apexcharts