Skip to content
This repository was archived by the owner on Jul 19, 2019. It is now read-only.
This repository was archived by the owner on Jul 19, 2019. It is now read-only.

Uncaught TypeError: Chart is not a constructor #100

Open
Open
Uncaught TypeError: Chart is not a constructor#100

Description

@leighghunt
leighghunt
opened on Apr 10, 2016

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.

Activity

  1. leighghunt commented on Apr 10, 2016

    @leighghunt
    leighghunt
    on Apr 10, 2016
    Author

    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

  2. leighghunt commented on Apr 10, 2016

    @leighghunt
    leighghunt
    on Apr 10, 2016
    Author

    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__) {

  3. leighghunt commented on Apr 11, 2016

    @leighghunt
    leighghunt
    on Apr 11, 2016
    Author

    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.

  4. gor181 commented on Apr 11, 2016

    @gor181
    gor181
    on Apr 11, 2016
    Contributor

    Same here, same error.

  5. leighghunt
    changed the title [-]Having trouble incorporating into project[/-] [+]Uncaught TypeError: Chart is not a constructor[/+] on Apr 11, 2016

  6. leighghunt commented on Apr 12, 2016

    @leighghunt
    leighghunt
    on Apr 12, 2016
    Author

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

  7. austinpray commented on Apr 14, 2016

    @austinpray
    austinpray
    on Apr 14, 2016
    Contributor

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

  8. gor181 commented on Apr 14, 2016

    @gor181
    gor181
    on Apr 14, 2016
    Contributor

    Hey @austinpray ,

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

    Cheers,

  9. austinpray commented on Apr 14, 2016

    @austinpray
    austinpray
    on Apr 14, 2016
    Contributor

    @gor181 shoot a PR over!

    This should fix it as well: #104

  10. PolGuixe commented on Apr 14, 2016

    @PolGuixe
    PolGuixe
    on Apr 14, 2016

    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. :)

  11. austinpray commented on Apr 14, 2016

    @austinpray
    austinpray
    on Apr 14, 2016
    Contributor

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

    Install chartjs 1.x

  12. leighghunt commented on Apr 15, 2016

    @leighghunt
    leighghunt
    on Apr 15, 2016
    Author

    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",

  13. leighghunt commented on Apr 15, 2016

    @leighghunt
    leighghunt
    on Apr 15, 2016
    Author

    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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions