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

Question

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

import React from 'react'
import CanvasJSReact from './canvasjs.react';
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class Home extends React.Component {
    render () {
        return (
            ...
        )
    }
}

但是，当我运行网站时，出现错误

ReferenceError: document is not defined
    at /project/.next/server/static/development/pages/index.js:2824:11
    at Object../pages/canvasjs.min.js (/project/.next/server/static/development/pages/index.js:13235:3)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/canvasjs.react.js (/project/.next/server/static/development/pages/index.js:14127:16)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/project/.next/server/static/development/pages/index.js:14209:73)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at Object.4 (/project/.next/server/static/development/pages/index.js:14351:18)
    at __webpack_require__ (/project/.next/server/static/development/pages/index.js:23:31)
    at /project/.next/server/static/development/pages/index.js:91:18
    at Object.<anonymous> (/project/.next/server/static/development/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1157:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1177:10)
    at Module.load (internal/modules/cjs/loader.js:1001:32)
    at Function.Module._load (internal/modules/cjs/loader.js:900:14)
    at Module.require (internal/modules/cjs/loader.js:1043:19)

我做错了什么？

Answer 1

尝试动态导入

例如，如果你想在页面或组件中动态导入它:

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

并像任何其他组件一样调用它:<PieChart />

最后在你的 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;