CanvasJs React – Cannot assign to read only property 'exports' of object

[ronaldtakarai]

I want to use CanvasJs React for the first time and follow guide at this link.

The link show three steps :
1. Create a React App
2. Save CanvasJS React Files in your app (downloaded from link)
3. Import CanvasJS React Component

I already done the three steps above, but after finishing the last steps i got this error on the webpage:

TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Module.<anonymous>
src/assets/js/canvasjs.react.js:42
  39 |  }   
  40 | }
  41 | 
> 42 | module.exports = {
  43 |     CanvasJSChart: CanvasJSChart,
  44 |     CanvasJS: CanvasJS
  45 | };

canvasjs.react.js :

var React = require('react');
var CanvasJS = require('./canvasjs.min');

class CanvasJSChart extends React.Component {
    static _cjsContainerId = 0
    constructor(props) {        
        super(props);       
        this.options = props.options ? props.options : {};      
        this.containerProps = props.containerProps ? props.containerProps : {width: "100%", position: "relative"};
        this.containerProps.height = props.containerProps && props.containerProps.height ? props.containerProps.height : this.options.height ? this.options.height + "px" : "400px";
        this.chartContainerId = "canvasjs-react-chart-container-" + CanvasJSChart._cjsContainerId++;
    }   
    componentDidMount() {
        //Create Chart and Render
        this.chart = new CanvasJS.Chart(this.chartContainerId, this.options);
        this.chart.render();

        if(this.props.onRef)
            this.props.onRef(this.chart);
    }   
    shouldComponentUpdate(nextProps, nextState){
        //Check if Chart-options has changed and determine if component has to be updated
        return !(nextProps.options === this.options);
    }
    componentDidUpdate() {
        //Update Chart Options & Render
        this.chart.options = this.props.options;
        this.chart.render();
    }
    componentWillUnmount() {
        //Destroy chart and remove reference
        this.chart.destroy();
        if(this.props.onRef)
            this.props.onRef(undefined);
    }       
    render() {      
        //return React.createElement('div', { id: this.chartContainerId, style: this.containerProps });     
        return <div id = {this.chartContainerId} style = {this.containerProps}/>        
    }   
}

module.exports = {
    CanvasJSChart: CanvasJSChart,
    CanvasJS: CanvasJS
};

App.js :

import React, { Component } from 'react';
var CanvasJSReact = require('./assets/js/canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class App extends Component {
    render() {
        const options = {
            title: {
                text: 'Basic Column Chart in React',
            },
            data: [
                {
                    type: 'column',
                    dataPoints: [
                        { label: 'Apple', y: 10 },
                        { label: 'Orange', y: 15 },
                        { label: 'Banana', y: 25 },
                        { label: 'Mango', y: 30 },
                        { label: 'Grape', y: 28 },
                    ],
                },
            ],
        };

        return (
            <div>
                <CanvasJSChart
                    options={options}
                    /* onRef = {ref => this.chart = ref} */
                />
            </div>
        );
    }
}

export default App;

I already tried to change module.exports in canvasjs.react.js to export default and require() in App.js to import but got another error appear TypeError: CanvasJS.Chart is not a constructor.

Here is my project code link

I’m using create-react-app v1.5.2 with:

react: 16.6.3,
react-dom: 16.6.3,
react-scripts: 2.1.1

nodejs: v8.13.0
npx: v6.4.1

Anyone has ever had a problem like me?

• This topic was modified 6 years ago by ronaldtakarai.

[jstauffer@bohlereng.com]

I am seeing the exact same behavior and message. Was thinking of purchasing but cannot get it to work in React App.

[Vishwas R]

@ronaldtakarai @jstaufferbohlereng-com,

Apologies for the inconvenience caused. The issue seems to be due to the breaking changes in Webpack that was introduced in v2.2.0-rc.5. We will fix it in our React Component soon. Please find the working code here.

—
Vishwas R
Team CanvasJS

[Raluca]

Hello! Has the issue been resolved?

I got this issue today and I wanted to know if I am doing something wrong or it hasn’t been resolved yet.

Thank you!

[Shashi Ranjan]

@raluca,

We are working on some other important updates at this point of time, but we have prioritized this request and we will fix it in our future releases.

____
Shashi Ranjan
Team CanvasJS

[badman31]

Hi,

I’m in the same situation as previous users of CanvasJS for react.

Please, would you have planned a date to fix the issue ?

[Shashi Ranjan]

@badman31,

Since we are working on some important features right now, we haven’t set a definite timeline yet for this issue.

____
Shashi Ranjan
Team CanvasJS

[briantdrake]

Curious if this issue has been resolved?

Many thanks!

Brian

[Vishwas R]

@ronaldtakarai @jstaufferbohlereng-com @raluca @badman31 Brian,

We have fixed the issue and will make it public soon. Meanwhile, please use this internal build with the fix and kindly let us know if it works fine.

Please download the React Sample Project with the internal build of CanvasJS from this link.

—
Vishwas R
Team CanvasJS

[pbidkar]

Hello Canvas team,
The issue has been fixed. However, we are getting the following error while using StackedArea chart. How quickly can this be fixed ?

ReferenceError: markerColor is not defined
l.renderStackedArea
src/js/canvasjs.min.js:370

Many Thanks !

[Shashi Ranjan]

@pbidkar,

Thanks for reporting the issue, we will work on it and fix it in our future releases.

____
Shashi Ranjan
Team CanvasJS

[Shashi Ranjan]

@pbidkar,

We have just released v2.3.1 with this bug fix. Please refer to the release blog for more information. Do download the latest version from our download page and let us know your feedback.

____
Shashi Ranjan
Team CanvasJS