I'm trying to use recharts form a React project but I can't simply import components from it's library then using it.
I'm importing it within my package.json
"recharts": "^2.0.9",
and my index.js can't be lighter
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {
Radar,
RadarChart,
PolarGrid,
PolarAngleAxis,
PolarRadiusAxis,
ResponsiveContainer,
} from 'recharts';
const info = {
datas: [
{
subject: 'test1',
A: 3,
fullMark: 5,
},
{
subject: 'test2',
A: 5,
fullMark: 5,
},
{
subject: 'test3',
A: 1,
fullMark: 5,
},
{
subject: 'test4',
A: 0,
fullMark: 5,
},
{
subject: 'test5',
A: 0,
fullMark: 5,
},
{
subject: 'test6',
A: 0,
fullMark: 5,
},
],
dataKeys: ['A'],
};
ReactDOM.render(
<ResponsiveContainer height='100%' width='100%'>
<RadarChart cx='50%' cy='50%' data={info.datas} outerRadius='80%'>
<PolarGrid />
<PolarAngleAxis dataKey='subject' />
<PolarRadiusAxis />
{info.dataKeys.map((dataKey, index) => (
<Radar
dataKey={dataKey}
fill={info.fill || '#8884d8'}
fillOpacity={0.6}
key={index}
name='Mike'
stroke={info.stroke || '#8884d8'}
/>
))}
</RadarChart>
</ResponsiveContainer>,
document.getElementById('radar')
);
This is the error message, habitually that happens when you miss the import but here it's the same as they mentioned in their doc.
Uncaught Error: 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.
followed by
The above error occurred in the component: at div at ResizeDetector (http://localhost:3000/static/js/vendors~main.chunk.js:56892:24) at ResponsiveContainer (http://localhost:3000/static/js/vendors~main.chunk.js:79234:5)
Any ideas?