Invariant Violation in Reactjs

Question

I'm working on graphs in react and I have encountered with the following error.

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of the App.

My code:

import React from 'react';
import {BarChart} from 'chart-race-react';
import './App.css';

const data = ['apple', 'banana', 'orange'].reduce((res, item) => ({...res, ...{[item]: Array(20).fill(0).map(_ => Math.floor(20 * Math.random()))}}), {});

console.log(data)

const randomColor = () => {
  return `rgb(${255 * Math.random()}, ${255 * Math.random()}, ${255})`;
}

const len = data[Object.keys(data)[0]].length;
const keys = Object.keys(data);
const colors = keys.reduce((res, item) => ({ 
    ...res, 
    ...{ [item]: randomColor() } 
}), {});

const labels = keys.reduce((res, item, idx) => {
  return{
   ...res, 
   ...{[item]: (
<div style={{textAlign:"center",}}>
  <div>{item}</div>
</div>
   )}
}}, {});

console.log(labels)

const time = Array(20).fill(0).map((itm, idx) => idx + 1);

class App extends React.Component {
  render(){
    return (
     <div style={{width: "500px"}}>
      <BarChart
        start={true}
        data={data} 
        timeline={time}
        labels={labels}
        colors={colors}
        len={len}
        timeout={400}
        delay={100}
        timelineStyle={{
          textAlign: "center",
          fontSize: "50px",
          color: "rgb(148, 148, 148)",
          marginBottom: "100px"
        }}
        textBoxStyle={{
          textAlign: "right",
          color: "rgb(133, 131, 131)",
          fontSize: "30px",
        }}
        barStyle={{
          height: "60px",
          marginTop: "10px",
          borderRadius: "10px",
        }}
        width={[15, 75, 10]}
        maxItems={10}
      />

    </div>
    );
  }
}
export default App;

Answer 1

You probably need to change your import to:

import BarChart from 'chart-race-react';

BarChart use an export default