CODEWITHSUNDEEP
reactjsnext.jscanvasjs
Norse
Norse

Reputation: 648

Error when using CanvasJS in a NextJS app

I want to use CanvasJS in my NextJS app. I have downloaded and put the files canvasjs.react.js and canvasjs.min.js inside the pages folder, and then import them inside a page like this

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

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

However, when I run the site, I get an error

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)

What am I doing wrong?

Upvotes: 3

Views: 1231

Answers (1)

Codinga
Codinga

Reputation: 620

Try to import it dynamically

For instance if you want display it in a page or component import it dynamically :

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

And call it like any other component: <PieChart />

Finally in your 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;

Upvotes: 2

Related Questions