JSX element type 'Line' is not a constructor function for JSX elements

Question

I am trying to use chart.js with Typescript to build an application in React, however when attempting to render a Line chart I get the error described above on this line:

<Line data={data}/>.

Along with this I also get the message "Type 'ChartComponent' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more."

Furthermore, when I use yarn start to run the application, the graph will render, but only for a split second before crashing with the error message.

I am fairly new to Typescript so I am confused as to what this error means. Any help would be appreciated.

import React, {Component} from 'react';
import Line from "react-chartjs-2"

class LineTest extends React.Component{

    render() {
        const data = {
          labels: [
            '10/04/2018', '10/05/2018', 
            '10/06/2018', '10/07/2018', 
            '10/08/2018', '10/09/2018', 
            '10/10/2018', '10/11/2018', 
            '10/12/2018', '10/13/2018', 
            '10/14/2018', '10/15/2018'
          ],
          datasets: [
            {
              label: 'Temperature',
              data: [22,19,27,23,22,24,17,25,23,24,20,19],
              fill: false,          
              borderColor: 'green'  
            }
          ]
        }

        return (
          <div className="App">
            <div>
              <Line data={data}/>
            </div>
          </div>
        );
      }
}

export default LineTest

im not good at typescript, but had such problem because of ; sign at the import. import Line from "react-chartjs-2"; Try to put and dont avoid semicolon — Alexey Nikonov
Line is named export in 'react-chartjs-2'. so use curly braces like {Line} instead of Line in import — Manoj Sharma

trixn trixn · Accepted Answer · 2019-07-15T12:10:47

The Line component is exported by react-chartjs-2 as a named export. You need to import it by its name:

import {Line} from 'react-chartjs-2';

Live Example:

JSX element type 'Line' is not a constructor function for JSX elements

1 Answers