Home › Forums › Chart Support › ReactJSCharts + Typescript › Reply To: ReactJSCharts + Typescript
I am running into trouble with the proposed solution. As true as it is that the @ts-ignore macro allows React to compile, the compiled application retains some “require” instructions from the module that the browser cannot parse, thus returning Uncaught ReferenceError: require is not defined
. Here’s a fragment of the compiled application with a minified-then-beautified version of canvas.react.js:
var qN = require("react/jsx-runtime").jsx,
hc = require("react"),
i6 = require("@canvasjs/charts");
i6 = i6.Chart ? i6 : window.CanvasJS;
class $N extends hc.Component {
constructor(e) {
super(e), this.options = e.options ? e.options : {}, this.containerProps = e.containerProps ? N2({}, e.containerProps) : {
width: "100%",
position: "relative"
}, this.containerProps.height = e.containerProps && e.containerProps.height ? e.containerProps.height : this.options.height ? this.options.height + "px" : "400px", this.containerRef = hc.createRef()
}
componentDidMount() {
this.chart = new i6.Chart(this.containerRef.current, this.options), this.chart.render(), this.props.onRef && this.props.onRef(this.chart)
}
shouldComponentUpdate(e, c) {
return e.options !== this.options
}
componentDidUpdate() {
this.chart.options = this.props.options, this.chart.render()
}
componentWillUnmount() {
this.chart && this.chart.destroy(), this.props.onRef && this.props.onRef(void 0)
}
render() {
return qN("div", {
id: this.props.id,
ref: this.containerRef,
style: this.containerProps
})
}
}
I have tested the module using JSX, but for this project TypeScript is a must. What else can I do?
Regards.