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

Question

我想第一次使用CanvasJs React，并在这个链接中遵循指南。

链接显示三个步骤：

1. 创建React应用程序
2. 在您的应用程序中保存CanvasJS React文件(从链接下载(
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-appv1.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中的突破性更改引起的。这是您分享的示例项目的更新代码(链接2(。

Answer 3

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