Uncaught TypeError: Chart is not a constructor

[leighghunt]

Hi,

I'm having trouble getting this working in my project, and I'm hoping I'm missing something obvious.

When I include the dist folder in my React/Reduc project, and open a view that includes some simple example code, I'm getting the following error within the react-chart.js file on the browser:

react-chartjs.js:143 Uncaught TypeError: Chart is not a constructor

Code in question, with > next to line causing issue:

        classData.initializeChart = function(nextProps) {
          var Chart = __webpack_require__(5);
          var el = ReactDOM.findDOMNode(this);
          var ctx = el.getContext("2d");
>         var chart = new Chart(ctx)[chartType](nextProps.data, nextProps.options || {});
          this.state.chart = chart;
        };

Chart seems to be getting initialised to the literal integer value 3.

My skeletal code in the view:

...
import React, { Component } from 'react'
import { connect } from 'react-redux'
...

import { Chart } from 'Chartjs'
import { Line } from 'react-chartjs'

...

class ChartView extends Component {
...
  render() {
...
    var chartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
    }

    var chartOptions = {

    };

    return (
      <div id='chart'>

      <Line data={chartData} options={chartOptions} width="600" height="250"/>

      </div>
    )
  }
}

export default connect(..., ...)(ChartView)

The react-chartjs.js file being downloaded to the browser is the file created by npm run build. I think I'm missing some basic webpack step (which I'm new to) perhaps? Any pointers?

Cheers,
Leigh.

[leighghunt]

If I butcher the react-chart.js file with some diagnostics, I notice that __WEBPACK_EXTERNAL_MODULE_5__ is getting passed in as the value 3 - I must be doing something wrong with my includes - I'll carry on investigating and update here.

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
    {
        console.log('A')
        module.exports = factory(require("react"), require("react-dom"), require("Chartjs"));
    }
    else if(typeof define === 'function' && define.amd)
    {
        console.log('B')
        define(["react", "react-dom", "Chartjs"], factory);
    }
    else if(typeof exports === 'object'){
        console.log('C')
        exports["react-chartjs"] = factory(require("react"), require("react-dom"), require("Chartjs"));
    }
    else{
        console.log('D')
        root["react-chartjs"] = factory(root["React"], root["ReactDOM"], root["Chart"]);
    }
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
return /******/ (function(modules) {

    console.log('__WEBPACK_EXTERNAL_MODULE_3__:')
    console.log(__WEBPACK_EXTERNAL_MODULE_3__)
    console.log('__WEBPACK_EXTERNAL_MODULE_4__:')
    console.log(__WEBPACK_EXTERNAL_MODULE_4__)
    console.log('__WEBPACK_EXTERNAL_MODULE_5__:')
    console.log(__WEBPACK_EXTERNAL_MODULE_5__)

B
react-chartjs.js:23 __WEBPACK_EXTERNAL_MODULE_3__:
react-chartjs.js:24 Object {Children: Object, PropTypes: Object, DOM: Object, version: "0.14.7", __SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: Object…}
react-chartjs.js:25 __WEBPACK_EXTERNAL_MODULE_4__:
react-chartjs.js:26 Object {version: "0.14.7"}
react-chartjs.js:27 __WEBPACK_EXTERNAL_MODULE_5__:
react-chartjs.js:28 3

[leighghunt]

OK, so found seemingly related issue over in angular-chart.js, whereby they tweaked the require calls to work around a requirejs issue - see jtblin/angular-chart.js#194.

I made the following change and the chart is now appearing. I'll carry on investigating - not sure if this is a workaround masking some underlying issue in my code.

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory(require("react"), require("react-dom"), require("Chartjs"));
    else if(typeof define === 'function' && define.amd)
//      define(["react", "react-dom", "Chartjs"], factory);
        define(["react", "react-dom", "Chart"], factory);   // <- tweaked this reference
    else if(typeof exports === 'object')
        exports["react-chartjs"] = factory(require("react"), require("react-dom"), require("Chartjs"));
    else{
        root["react-chartjs"] = factory(root["React"], root["ReactDOM"], root["Chart"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {

[leighghunt]

I've confirmed that the following change resolves the issue for me:

venari@f0639fa

Still not 100% sure this isn't a problem with my code, so I won't submit a PR now - but would be interested to hear if others experience this issue - judging by lack of people reporting it, I'm suspecting it's just me.

[gor181]

Same here, same error.

[leighghunt]

Unfortunately, my workaround doesn't appear to work in the chartjs-v2 branch. 😞

[austinpray]

Are you trying to use Chartjs v2 with the current release of react-chartjs? The master only works with v1 right now.

[gor181]

Hey @austinpray ,

I apologise I realized that chartJs v1 is required for this to work :)
I think we should add this to readme?

Cheers,

[austinpray]

@gor181 shoot a PR over!

This should fix it as well: #104

[PolGuixe]

Similar error here:

npm WARN react-chartjs@0.7.3 requires a peer of chart.js@* but none was installed.

Can we get this PR: venari@f0639fa in AS SOON AS POSSIBLE. :)

[austinpray]

@PolGuixe read the error message. It's telling you exactly what's going on.

Install chartjs 1.x

[leighghunt]

Are you trying to use Chartjs v2 with the current release of react-chartjs? The master only works with v1 right now.

Hi @austinpray, my intention has been to be matching the two versions - I've been trying the following combinations - see my package.json file:

Version 1 (encountering this issue):

"dependencies": {
...
    "chart.js": "^1.1.1",
...
...
    "react-chartjs": "^0.7.3",

And then my fork, which resolved this issue for me:

"dependencies": {
...
    "chart.js": "^1.1.1",
...
...
    "react-chartjs": "git://github.com/venari/react-chartjs.git",

Version 2 (encountering the same symptoms as this issue):

"dependencies": {
...
    "chart.js": "^2.0.0",
...
...
    "react-chartjs": "git://github.com/venari/react-chartjs.git#chartjs-v2",

[leighghunt]

Another thing - we're starting to think this may be to do with the fact we're using Dojo to load libraries - anyone else whose experiencing this issue, are you using Dojo?