ReactJSCharts + Typescript

• June 26, 2023 at 9:42 pm #43209
  
  Emin500

  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.

  July 6, 2023 at 7:54 pm #43274
  
  Sachin Bisht

  @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

  September 7, 2023 at 9:13 pm #43716
  
  gojukebox@gmail.com

  Even the Stackblitz shows a typescript error:
  Cannot find module '@canvasjs/react-charts' or its corresponding type declarations.

  if you hover over ‘@canvasjs/react-charts’ in the import statement

  September 12, 2023 at 5:46 pm #43734
  
  Sachin Bisht

  @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
  import CanvasJSReact from '@canvasjs/react-charts';

  __
  Sachin Bisht
  Team CanvasJS

  November 27, 2023 at 8:51 pm #44270
  
  jalmartinez

  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.

  December 1, 2023 at 8:41 pm #44295
  
  Atrhick

  @jalmartinez im having the same issue. were you able to resolve this?

  December 1, 2023 at 9:36 pm #44296
  
  Atrhick

  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.

  December 13, 2023 at 1:20 pm #44339
  
  jalmartinez

  @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.