CanvasJs React - 无法分配给对象的只读属性“导出”

Question

我想第一次使用 CanvasJs React 并按照link 的指南进行操作。

链接显示三个步骤：

1. 创建一个 React 应用程序
2. 在您的应用中保存 CanvasJS React 文件（从 link 下载）
3. 导入 CanvasJS React 组件

我已经完成了上面的三个步骤，但是在完成最后一个步骤后，我在网页上收到了这个错误：

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;

我正在使用 create-react-app v1.5.2：

react: 16.6.3,
react-dom: 16.6.3,
react-scripts: 2.1.1

nodejs: v8.13.0
npx: v6.4.1

有人遇到过像我这样的问题吗？

Answer 1

我遇到了同样的问题，我通过将 canvasjs.react.js 的结束语法切换为：

export {CanvasJSChart, CanvasJS};

并在 App.js 中导入画布：

import CanvasJSReact from './canvasjs.react';
import { CanvasJS } from './canvasjs.react';
import { CanvasJSChart} from './canvasjs.react';

而不是使用require。希望对您有所帮助！

Answer 2

这个问题似乎是由于 v2.2.0-rc.5 中引入的 Webpack 中的重大更改。这是您分享的Sample Project 的Updated Code (Link 2)。

Answer 3

根据Webpack，不能混用import和module.exports。尝试仅使用 require() 语句。