Home forums Using CanvasJS CanvasJs React – Cannot assign to read only property 'exports' of object

This topic contains 2 replies, has 3 voices, and was last updated by  Vishwas R 2 weeks, 6 days ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23564

    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?

    #23569

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

    #23573

    Vishwas R
    Keymaster

    @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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.