React-chartjs не работает

Question

Я пытаюсь использовать реагировать-chartjs в моем проекте, но это не похоже на работу ...

Я использую реагировать-маршрутизатор, чтобы загрузить эту страницу (дома) :

import React from 'react'; 
 
import { TextField, RaisedButton } from 'material-ui'; 
 
import { History } from 'react-router'; 
 
import Chart from './widgets/Chart.js'; 
 

 

 
const Home = React.createClass({ 
 

 
    getInitialState() { 
 
     return { 
 
     }; 
 
    }, 
 

 
    componentDidMount() { 
 
    }, 
 

 
    toggleNotification() { 
 

 
    }, 
 

 
    render() { 
 

 
     return (
 
      <div> 
 
       <Chart/> 
 
      </div> 
 
     ) 
 
    } 
 
}); 
 

 
export default Home;

и диаграмма относится к этому файлу:

import React from 'react'; 
 
import Chart from 'chart.js'; 
 
import {LineChart} from 'react-chartjs'; 
 

 
function rand(min, max, num) { 
 
    var rtn = []; 
 
    while (rtn.length < num) { 
 
     rtn.push((Math.random() * (max - min)) + min); 
 
    } 
 
    return rtn; 
 
} 
 

 
const ChartWidget = React.createClass({ 
 

 
    getInitialState() { 
 
     return { 
 
      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: [5, 8, 2, 0, 1, 2, 0] 
 
       }, 
 
       { 
 
        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: [-2, -5, 0, -3, -1, 0, -1] 
 
       } 
 
      ] 
 
     }}; 
 
    }, 
 

 
    componentDidMount() { 
 
    }, 
 

 
    toggleNotification() { 
 

 
    }, 
 

 
    render() { 
 
     return (
 
       <LineChart data={this.state.chartData} redraw width="600" height="250" /> 
 
     ) 
 
    } 
 
}); 
 

 
export default ChartWidget;

Ошибка я получаю:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of ChartWidget .warning @ vendor.bundle.js:11125ReactElementValidator.createElement @ vendor.bundle.js:27927render @ app.bundle.js:29792(anonymous function) @ app.bundle.js:407ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ vendor.bundle.js:14599ReactCompositeComponentMixin._renderValidatedComponent @ vendor.bundle.js:14619wrapper @ vendor.bundle.js:11394ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14232wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactMultiChild.Mixin.mountChildren @ vendor.bundle.js:22652ReactDOMComponent.Mixin._createContentMarkup @ vendor.bundle.js:19830ReactDOMComponent.Mixin.mountComponent @ vendor.bundle.js:19718ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542ReactCompositeComponentMixin.mountComponent @ vendor.bundle.js:14237wrapper @ vendor.bundle.js:11394ReactReconciler.mountComponent @ vendor.bundle.js:12542mountComponentIntoNode @ vendor.bundle.js:8912Mixin.perform @ vendor.bundle.js:13649batchedMountComponentIntoNode @ vendor.bundle.js:8928Mixin.perform @ vendor.bundle.js:13649ReactDefaultBatchingStrategy.batchedUpdates @ vendor.bundle.js:19229batchedUpdates @ vendor.bundle.js:13154ReactMount._renderNewRootComponent @ vendor.bundle.js:9122wrapper @ vendor.bundle.js:11394ReactMount._renderSubtreeIntoContainer @ vendor.bundle.js:9196ReactMount.render @ vendor.bundle.js:9216wrapper @ vendor.bundle.js:11394(anonymous function) @ app.bundle.js:280(anonymous function) @ app.bundle.js:285(anonymous function) @ app.bundle.js:286__webpack_require__ @ vendor.bundle.js:1051fn @ vendor.bundle.js:596(anonymous function) @ app.bundle.js:7__webpack_require__ @ vendor.bundle.js:1051webpackJsonpCallback @ vendor.bundle.js:22(anonymous function) @ app.bundle.js:1 vendor.bundle.js:9781 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ChartWidget .

Могу только сказать мне, что я сделал не так?

Использование:
WebPack
Hotloaders
React.js
React-маршрутизатор
реагирующие-chartjs материал-щ

Answer 1

попробуйте импортировать Linechart этот путь вместо:

const LineChart = require('react-chartjs').Line;

и удаления:

import {LineChart} from 'react-chartjs';