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

• November 28, 2018 at 8:59 am #23564
  
  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 5 years, 12 months ago by ronaldtakarai.
  November 28, 2018 at 9:26 pm #23569
  
  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.

  November 29, 2018 at 1:10 pm #23573
  
  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

  January 9, 2019 at 2:52 pm #23970
  
  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!

  January 10, 2019 at 10:25 pm #23985
  
  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

  January 14, 2019 at 2:34 pm #24016
  
  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 ?

  January 16, 2019 at 9:22 pm #24036
  
  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

  January 30, 2019 at 10:20 am #24163
  
  briantdrake

  Curious if this issue has been resolved?

  Many thanks!

  Brian

  January 30, 2019 at 6:08 pm #24171
  
  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

  February 1, 2019 at 9:37 pm #24199
  
  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 !

  February 4, 2019 at 8:35 pm #24205
  
  Shashi Ranjan

  @pbidkar,

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

  ____
  Shashi Ranjan
  Team CanvasJS

  February 8, 2019 at 5:22 pm #24264
  
  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