Reactjs 在NextJS应用程序中使用CanvasJS时出错

我想在我的NextJS应用程序中使用CanvasJS。我已经下载并将文件canvasjs.react.js和canvasjs.min.js放在pages文件夹中，然后将它们导入这样的页面中

从“React”导入React
从“/canvasjs.react”导入CanvasJSReact；
var CanvasJS=CanvasJSReact.CanvasJS；
var CanvasJSChart=CanvasJSReact.CanvasJSChart；
类Home扩展了React.Component{
渲染（）{
返回(
...
)
}
}

然而，当我运行这个站点时，我得到了一个错误

ReferenceError:未定义文档
在/project/.next/server/static/development/pages/index.js:2824:11
位于Object../pages/canvasjs.min.js（/project/.next/server/static/development/pages/index.js:13235:3）
在uu webpack_urequire_uu（/project/.next/server/static/development/pages/index.js:23:31）
位于Module../pages/canvasjs.react.js（/project/.next/server/static/development/pages/index.js:14127:16）
在uu webpack_urequire_uu（/project/.next/server/static/development/pages/index.js:23:31）
位于Module../pages/index.js（/project/.next/server/static/development/pages/index.js:14209:73）
在uu webpack_urequire_uu（/project/.next/server/static/development/pages/index.js:23:31）
在Object.4（/project/.next/server/static/development/pages/index.js:14351:18）
在uu webpack_urequire_uu（/project/.next/server/static/development/pages/index.js:23:31）
在/project/.next/server/static/development/pages/index.js:91:18
反对。（/project/.next/server/static/development/pages/index.js:94:10）
at模块编译（内部/modules/cjs/loader.js:1157:30）
at Object.Module._extensions..js（internal/modules/cjs/loader.js:1177:10）
在Module.load（内部/modules/cjs/loader.js:1001:32）
at Function.Module._load（内部/modules/cjs/loader.js:900:14）
at Module.require（内部/modules/cjs/loader.js:1043:19）

---

我做错了什么？

尝试动态导入它

例如，如果要在页面或组件中显示，请动态导入：

import dynamic from 'next/dynamic'
const PieChart = dynamic(() => import("path/to/your/chartFile"))

并像其他组件一样调用它：

最后，在chartFile.js中：

import React, {Component} from "react";

import CanvasJSReact from './canvasjs.react'

class PieChart extends Component {
    render() {
        const options = {
            animationEnabled: true,
            title: {
                text: "Customer Satisfaction"
            },
            subtitles: [{
                text: "71% Positive",
                verticalAlign: "center",
                fontSize: 24,
                dockInsidePlotArea: true
            }],
            data: [{
                type: "doughnut",
                showInLegend: true,
                indexLabel: "{name}: {y}",
                yValueFormatString: "#,###'%'",
                dataPoints: [
                    { name: "Unsatisfied", y: 5 },
                    { name: "Very Unsatisfied", y: 31 },
                    { name: "Very Satisfied", y: 40 },
                    { name: "Satisfied", y: 17 },
                    { name: "Neutral", y: 7 }
                ]
            }]
        }

        var CanvasJSChart = CanvasJSReact.CanvasJSChart;

        return (
        <div>
            <CanvasJSChart options = {options}
                /* onRef={ref => this.chart = ref} */
            />
            {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
        </div>
        );
    }
}
export default PieChart; 

import React，{Component}来自“React”；
从“/canvasjs.react”导入CanvasJSReact
类扩展组件{
render（）{
常量选项={
animationEnabled：没错，
标题：{
正文：“客户满意度”
},
字幕：[{
文字：“71%阳性”，
垂直排列：“中心”，
尺寸：24，
dockInsidePlotArea：真
}],
数据：[{
类型：“甜甜圈”，
showInLegend：是的，
索引标签：“{name}:{y}”，
yValueFormatString:“#，###'%”，
数据点：[
{名称：“不满意”，y:5}，
{姓名：“非常不满意”，y:31}，
{姓名：“非常满意”，y:40}，
{姓名：“满意”，y:17}，
{名称：“中立”，y:7}
]
}]
}
var CanvasJSChart=CanvasJSReact.CanvasJSChart；
返回(
this.chart=ref}*/
/>
{/*您可以使用onRef获取对如上所示图表实例的引用。这允许您访问所有图表属性和方法*/}
);
}
}
导出默认图形；

Hey:）我也有同样的问题，想知道你是否找到了解决方案？有解决方案吗（很抱歉，我记不起来了，但我认为下面的答案有帮助。请您详细解释一下动态导入，需要在我们需要在canvajs.react.js中或在canvajs.react.js中呈现图表的页面上完成