TypeError: _reactStockcharts2.default

[qrom]

Hi,

I get following error when trying to implement a simple example with version 0.6.0-beta.11

TypeError: _reactStockcharts2.default is undefined[Weitere Informationen]  bundle.js:65306:6
    <anonym> http://localhost:3000/static/js/bundle.js:65306:6
    __webpack_require__ http://localhost:3000/static/js/bundle.js:556:12
    hotCreateRequire/fn http://localhost:3000/static/js/bundle.js:87:20
    <anonym> http://localhost:3000/static/js/bundle.js:45232:19
    __webpack_require__ http://localhost:3000/static/js/bundle.js:556:12
    hotCreateRequire/fn http://localhost:3000/static/js/bundle.js:87:20
    <anonym> http://localhost:3000/static/js/bundle.js:10841:16
    __webpack_require__ http://localhost:3000/static/js/bundle.js:556:12
    hotCreateRequire/fn http://localhost:3000/static/js/bundle.js:87:20
    <anonym> http://localhost:3000/static/js/bundle.js:591:19
    __webpack_require__ http://localhost:3000/static/js/bundle.js:556:12
    <anonym> http://localhost:3000/static/js/bundle.js:579:18
    <anonym>

I just created the component (based on create-react-app) similar to one of your chart examples. Do I missed something?

The Component:

import ReStock from "react-stockcharts";
import React from "react";
import {connect} from 'react-redux';
import d3 from 'd3';

var { ChartCanvas, Chart } = ReStock;

//var { CandlestickSeries } = ReStock.series;
var { XAxis, YAxis } = ReStock.axes;
var { fitWidth, TypeChooser } = ReStock.helper;

class DataChart extends React.Component {
    render() {
        return (
            <ChartCanvas width={this.props.width} height={400}
                margin={{left: 0, right: 0, top:25, bottom: 30}} type={this.props.type}
                data={this.props.data}
                seriesName='CandleStick'
                xAccessor={d => d[0]} xScale={d3.time.scale()}>

                <Chart id={1} yExtents={d => [d[1][0]]}>
                    <XAxis axisAt="bottom" orient="bottom" ticks={6} stroke="none" tickStroke="#9E9E9E"/>
                    <YAxis axisAt="left" orient="right" ticks={10} stroke="none" tickStroke="#9E9E9E"/>
                </Chart>
            </ChartCanvas>
        );
    }
}

DataChart.propTypes = {
    data: React.PropTypes.array.isRequired,
    width: React.PropTypes.number.isRequired,
    ratio: React.PropTypes.number.isRequired,
    type: React.PropTypes.oneOf(["svg", "hybrid"]).isRequired
};

DataChart.defaultProps = {
    type: "svg",
};
DataChart = fitWidth(DataChart);

function mapStateToProps(state) {
    return {
        width: 300,
        ratio: 1.0,
        type: "svg",
        data: state.getIn(['trace', 'gas', 'main']).map(arr => [Date.parse(arr[0]), arr[1]]).toArray()
    };
}

export const DataChartContainer = connect(mapStateToProps)(DataChart);

The bundle.js:

 !*** ./src/components/DataChart.js ***!
  \*************************************/
/***/ function(module, exports, __webpack_require__) {

    "use strict";

    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    exports.DataChartContainer = undefined;
    var _jsxFileName = "/home/germar/workspace/deep-geisten/seher/src/components/DataChart.js";

    var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

    var _reactStockcharts = __webpack_require__(/*! react-stockcharts */ 627);

    var _reactStockcharts2 = _interopRequireDefault(_reactStockcharts);

    var _react = __webpack_require__(/*! react */ 89);

    var _react2 = _interopRequireDefault(_react);

    var _reactRedux = __webpack_require__(/*! react-redux */ 339);

    var _d = __webpack_require__(/*! d3 */ 772);

    var _d2 = _interopRequireDefault(_d);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

    function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

    var ChartCanvas = _reactStockcharts2.default.ChartCanvas,
        Chart = _reactStockcharts2.default.Chart;

    //var { CandlestickSeries } = ReStock.series;

    var _ReStock$axes = _reactStockcharts2.default.axes,
        XAxis = _ReStock$axes.XAxis,
        YAxis = _ReStock$axes.YAxis;
    var _ReStock$helper = _reactStockcharts2.default.helper,
        fitWidth = _ReStock$helper.fitWidth,
        TypeChooser = _ReStock$helper.TypeChooser;

    var DataChart = function (_React$Component) {
        _inherits(DataChart, _React$Component);

        function DataChart() {
            _classCallCheck(this, DataChart);

            return _possibleConstructorReturn(this, (DataChart.__proto__ || Object.getPrototypeOf(DataChart)).apply(this, arguments));
        }

        _createClass(DataChart, [{
            key: "render",
            value: function render() {
                return _react2.default.createElement(
                    ChartCanvas,
                    { width: this.props.width, height: 400,
                        margin: { left: 0, right: 0, top: 25, bottom: 30 }, type: this.props.type,
                        data: this.props.data,
                        seriesName: "CandleStick",
                        xAccessor: function xAccessor(d) {
                            return d[0];
                        }, xScale: _d2.default.time.scale(), __source: {
                            fileName: _jsxFileName,
                            lineNumber: 15
                        },
                        __self: this
                    },
                    _react2.default.createElement(
                        Chart,
                        { id: 1, yExtents: function yExtents(d) {
                                return [d[1][0]];
                            }, __source: {
                                fileName: _jsxFileName,
                                lineNumber: 21
                            },
                            __self: this
                        },
                        _react2.default.createElement(XAxis, { axisAt: "bottom", orient: "bottom", ticks: 6, stroke: "none", tickStroke: "#9E9E9E", __source: {
                                fileName: _jsxFileName,
                                lineNumber: 22
                            },
                            __self: this
                        }),
                        _react2.default.createElement(YAxis, { axisAt: "left", orient: "right", ticks: 10, stroke: "none", tickStroke: "#9E9E9E", __source: {
                                fileName: _jsxFileName,
                                lineNumber: 23
                            },
                            __self: this
                        })
                    )
                );
            }
        }]);

        return DataChart;
    }(_react2.default.Component);

    DataChart.propTypes = {
        data: _react2.default.PropTypes.array.isRequired,
        width: _react2.default.PropTypes.number.isRequired,
        ratio: _react2.default.PropTypes.number.isRequired,
        type: _react2.default.PropTypes.oneOf(["svg", "hybrid"]).isRequired
    };

    DataChart.defaultProps = {
        type: "svg"
    };
    DataChart = fitWidth(DataChart);

    function mapStateToProps(state) {
        return {
            width: 300,
            ratio: 1.0,
            type: "svg",
            data: state.getIn(['trace', 'gas', 'main']).map(function (arr) {
                return [Date.parse(arr[0]), arr[1]];
            }).toArray()
        };
    }

        var DataChartContainer = exports.DataChartContainer = (0, _reactRedux.connect)(mapStateToProps)(DataChart);

/***/ },
/* 627 */

Thank you in advance

qrom

[rrag]

- import ReStock from "react-stockcharts";
+ import * as ReStock from "react-stockcharts";

Is there somewhere the documentation has to be updated?

[qrom]

Sorry, my fault. I was just confused :)

Thanks for the fast reply.