React impoting recharts failed

Question

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?

Answer 1

I found the problem.

You must indicate a fixed height for ResponsiveContainer.

So I changed this <ResponsiveContainer height='100%' width='100%'> to that <ResponsiveContainer height={400} width='100%'> .

The error is in their examples. ex: https://recharts.org/en-US/examples/SimpleRadarChart