直接访问网址时如何解决“无法读取未定义的属性'文档'”？ Next.js 和 apexcharts 库

Posted 2023-03-06

【中文标题】直接访问网址时如何解决“无法读取未定义的属性\'文档\'”？ Next.js 和 apexcharts 库

【英文标题】：How can I fix "Cannot read property 'document' of undefined" when directly accessing the url? Next.js and apexcharts lib直接访问网址时如何解决“无法读取未定义的属性'文档'”？ Next.js 和 apexcharts 库

【发布时间】：2019-05-22 08:54:05

【问题描述】：

我正在使用 react-apexcharts 库：https://github.com/apexcharts/react-apexcharts。

当我导入一个将 lib 导入页面的组件时，当我导航到它时效果很好（客户端路由）。但是当直接使用 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 的服务器端渲染的问题

【问题讨论】：

看起来该库需要一个文档才能运行。只在服务器上渲染它。 ***.com/questions/49411796/…

【参考方案1】：

解决此问题的一种方法是使用 nextjs 的动态导入

import dynamic from 'next/dynamic'
const Chart = dynamic(() => import('react-apexcharts'), s-s-r:false)

您的服务器在第一次启动时仍然会抱怨文档的情况， 但这不会反映在客户端

【讨论】：

如何在 Angular 上做到这一点？

【参考方案2】：

图表库在渲染期间需要一个在 s-s-r 期间不存在的窗口对象。

我建议查看https://github.com/zeit/next.js/#dynamic-import（带有选项s-s-r: false）以跳过服务器上的渲染。此外，该库未加载到服务器上，这减少了您的捆绑包大小...

【讨论】：

这不会破坏 next.js 的实际巨大优势吗？我选择 next.js 主要是因为 s-s-r，因为我想要好的 SEO。删除它可以达到这个目的

好吧，在某些情况下，您别无选择。一些第 3 方库不支持 s-s-r，并且会在服务器上崩溃。（传单也是如此）。

...但是在大多数情况下这很好 IMO，因为从 UX 的角度来看，在服务器上呈现图表或地图并没有真正意义...搜索引擎机器人也不会从中获取任何有意义的信息。

charts.js 是 :)

如何在 Angular 上做到这一点？