You must be logged in to post your query.
Home › Forums › Chart Support › ReactJSCharts + Typescript
Tagged: typescript
I’m working on a project with React and Typescript. I’m running into an error that’s stemming from the import of the CanvasJSReact chart import (import CanvasJSReact from ‘@canvasjs/react-charts’) . The error shows up as “TS7016: Could not find a declaration file for module ‘@canvasjs/react-charts’. ‘C:/…/../…/…/node_modules/@canvasjs/react-charts/canvasjs.react.js’ implicitly has an ‘any’ type.” When I run npm start, the website runs and the graph is displayed, but the error message does not go away.
Does this package include a type declaration for typescript uses?
I did npm install for both @canvasjs and for @canvasjs/react-charts, but still getting the same error. Would love some help.
@emin500,
React charts seem to be working fine with typescript. Please take a look at this Stackblitz code for a working example.
If you are still facing issue, kindly create a sample project reproducing the issue you are facing and share it with us over Onedrive / Google-Drive, so that we can run the sample locally at our end to understand the scenario better and help you out.
__ Sachin Bisht Team CanvasJS
Even the Stackblitz shows a typescript error: Cannot find module '@canvasjs/react-charts' or its corresponding type declarations.
Cannot find module '@canvasjs/react-charts' or its corresponding type declarations.
if you hover over ‘@canvasjs/react-charts’ in the import statement
@gojukeboxgmail-com,
We don’t have CanvasJS React Charts TypeScript definition as of now. However, charts seems to work fine with React TypeScript as-well. You can ignore the corresponding error in Stackblitz by adding // @ts-ignore above the import statement as shown in the code-snippet below.
// @ts-ignore
// @ts-ignore import CanvasJSReact from '@canvasjs/react-charts';
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:
Uncaught ReferenceError: require is not defined
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.
@jalmartinez im having the same issue. were you able to resolve this?
found a quick fix for this. instead of using
To Setup npm install -g serve
To run the Build npm run build
Make sure the name of the folder is Build and not something else like dist serve -s build
you can use sudo npm run dev locally or on your server to get around this issue.
@Atrhick Thanks for asking and the proposed workaround. I finally gave up with CanvasJS, there seems to be some sort of compatibility issue with Vite or I am not skillful in React yet to debug what’s going on, so I’ve switched to another library that has better compatibility without Webpack or Browserify.
Cheers.
You must be logged in to reply to this topic. Login/Register