Как я могу исправить "Не удается прочитать свойство" документ "с неопределенным" при прямом доступе к URL? Next.js и apexcharts lib

Question

Я использую библиотеку реактив-апексхартов: https://github.com/apexcharts/react-apexcharts.

Когда я импортирую компонент, который импортирует библиотеку на страницу, он прекрасно работает, когда я к нему перехожу (маршрутизация на стороне клиента). но при доступе к странице напрямую с URL я получаю сообщение об ошибке:

Cannot read property 'document' of undefined
TypeError: Cannot read property 'document' of undefined
at Object.<anonymous> (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:433939)
at Object.<anonymous> (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:433950)
at s (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:395)
at Object.<anonymous> (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:169139)
at s (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:395)
at Object.<anonymous> (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:456290)
at s (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:395)
at C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:769
at C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:780
at C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:143
at Object.<anonymous> (C:\Users\a\Desktop\b\b-client\node_modules\apexcharts\dist\apexcharts.min.js:1:263)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)

Стоит отметить, что я использую next.js, который использует рендеринг на стороне сервера.

Код не имеет отношения к IMO, я только что создал пример компонента из их документации github:

import Chart from 'react-apexcharts'
import React, { Component } from "react";

class ChartExample extends Component {
constructor(props) {
    super(props);

    this.state = {
        options: {
            chart: {
                id: 'apexchart-example'
            },
            xaxis: {
                categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998]
            }
        },
        series: [{
            name: 'series-1',
            data: [30, 40, 45, 50, 49, 60, 70, 91]
        },
        {
            name: 'series-2',
            data: [90, 210, 105, 50, 43, 99, 333, 4]
        }]
    }
}
render() {
    return (
        <Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} />
    )
}
}

export default ChartExample;

И я импортирую это регулярно:

import ChartExample from "../../components/dashboard/ChartExample";

Как я могу это исправить? Я считаю, что это проблема с рендерингом next.js на стороне сервера

Answer 1

Один из способов решить эту проблему - использовать динамический импорт nextjs

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

Ни в коем случае ваш сервер все равно будет жаловаться на документ при первом запуске, но это не отразится на стороне клиента.

Answer 2

Библиотека графиков нуждается в объекте окна во время рендеринга, которого нет во время SSR.

Я бы рекомендовал взглянуть на https://github.com/zeit/next.js/ (с опцией {ssr: false}) пропустить рендеринг на сервере. Кроме того, библиотека не загружается на сервер, что уменьшило размер вашего пакета...