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

Question

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'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?

Answer 1

The issue seems to be due to the breaking changes in Webpack that was introduced in v2.2.0-rc.5. Here is the Updated Code (Link 2) of Sample Project that you have shared.