Uncaught TypeError: typeGetter is not a function

[matsad3547]

I tried to run this library in a fresh create-react-app to make sure no other dependencies were messing with it and I got the error above when I tried to use the Line chart from the stories. I ran yarn add react-charts and yarn add react-resizable.

[tannerlinsley]

Can you post your code?

[matsad3547]

App.js:

import logo from './logo.svg';
import './App.css';
// import * as reactCharts from 'react-charts'
// console.log('react charts:', reactCharts ? reactCharts : 'nothing');
import Line from './Line'

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Line />
      </div>
    );
  }
}

export default App;

Line.js:

import _ from 'lodash'
import { ResizableBox } from 'react-resizable'
//
import { Chart, Axis, Series, Tooltip } from 'react-charts'
//
// import CodeHighlight from './components/codeHighlight.js'

class Line extends Component {
  constructor () {
    super()
    this.state = {
      data: makeData()
    }
  }
  render () {
    const {
      data
    } = this.state
    return (
      <div>
        <button
          onClick={() => this.setState({
            data: makeData()
          })}
        >
          Randomize Data
        </button>

        <br />
        <br />

        {_.range(1).map((d, i) => (
          <ResizableBox
            key={i}
            width={500}
            height={300}
          >
            <Chart
              data={data}
            >
              <Axis
                primary
                type='time'
                position='bottom'
              />
              <Axis
                type='linear'
                position='left'
              />
              <Series
                type='line'
              />
              <Tooltip />
            </Chart>
          </ResizableBox>
        ))}

        <br />
        <br />
      </div>
    )
  }
}

export default () => <Line />

function makeData () {
  return _.map(_.range(Math.max(Math.round((Math.random() * 4)), 1)), d => makeSeries())
}
function makeSeries () {
  const startDate = new Date()
  // const length = Math.round(Math.random() * 30)
  const length = 30
  const max = 100
  // const max = Math.random() > 0.5 ? 100000 : 10
  // const multiplier = 10
  // const multiplier = Math.round((Math.random() * 10) + Math.round(Math.random() * 50))
  return _.map(_.range(length), d => ({
    // x: d * multiplier,
    x: new Date().setMinutes(startDate.getMinutes() + (30 * d)),
    y: Math.round(Math.random() * (max) + Math.round(Math.random() * 50)),
    r: Math.round(Math.random() * 5)
  }))
}

[epalaima]

I am getting the same issue. Also using the Line.js example.

[tannerlinsley]

This should be fixed now.