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

This topic contains 11 replies, has 8 voices, and was last updated by  Shashi Ranjan 1 week, 3 days ago.

Viewing 12 posts - 1 through 12 (of 12 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?

    • This topic was modified 2 months, 3 weeks ago by  ronaldtakarai.
    #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

    #23970

    Raluca
    Member

    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!

    #23985

    @raluca,

    We are working on some important updates right now, but we have prioritized this request and will fix it in our future releases.

    ____
    Shashi Ranjan
    Team CanvasJS

    #24016

    badman31
    Member

    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 ?

    #24036

    @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

    #24163

    briantdrake
    Member

    Curious if this issue has been resolved?

    Many thanks!

    Brian

    #24171

    Vishwas R
    Keymaster

    @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

    #24199

    pbidkar
    Member

    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 !

    #24205

    @pbidkar,

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

    ____
    Shashi Ranjan
    Team CanvasJS

    #24264

    @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

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

You must be logged in to reply to this topic.