You must be logged in to post your query.
Home › Forums › Chart Support › CanvasJs React – Cannot assign to read only property 'exports' of object
Tagged: canvasjs reactjs
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?
I am seeing the exact same behavior and message. Was thinking of purchasing but cannot get it to work in React App.
@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
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!
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
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 ?
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
Curious if this issue has been resolved?
Many thanks!
Brian
@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
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 !
Thanks for reporting the issue, we will work on it and fix it in our future releases.
____
Shashi Ranjan
Team CanvasJS
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
Tagged: canvasjs reactjs
You must be logged in to reply to this topic.