large production bundle size in typescript react app

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Recharts loading entire index.js

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

https://github.com/vigyanhoon/the-list this repo has the code. Also attached is the production build analysis

I have included charts in Graph1 and Graph2 like so

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from ‘recharts’;

I have also added types “@types/recharts”: “^1.8.12”,

When I try to import using this import LineChart from 'recharts/es6/chart/LineChart' it gives following error: Could not find a declaration file for module ‘recharts/es6/chart/LineChart’. ‘c:/Users/vigya/Desktop/projects/the-list/node_modules/recharts/es6/chart/LineChart.js’ implicitly has an ‘any’ type. If the ‘recharts’ package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/recharts`

What is the expected behavior?

It should only include components that I have used.

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

Windows 10 and “recharts”: “^1.8.5”,

[monsieurnebo]

I just tried the recharts/es6/ import method, and my bundle is still crazy big.

Any lead on recharts optimization? It is the biggest part of my production bundle 😐

[goenning]

I have a workaround in case someone is looking for it.

Import from es6 and export it alongside it’s type definition:

import type { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip } from 'recharts'

const ResponsiveContainerImpl: typeof ResponsiveContainer = require('recharts/es6/component/ResponsiveContainer').default
const AreaChartImpl: typeof AreaChart = require('recharts/es6/chart/AreaChart').default
const AreaImpl: typeof Area = require('recharts/es6/cartesian/Area').default
const XAxisImpl: typeof XAxis = require('recharts/es6/cartesian/XAxis').default
const YAxisImpl: typeof YAxis = require('recharts/es6/cartesian/YAxis').default
const TooltipImpl: typeof Tooltip = require('recharts/es6/component/Tooltip').default

export {
  ResponsiveContainerImpl as ResponsiveContainer,
  AreaChartImpl as AreaChart,
  AreaImpl as Area,
  XAxisImpl as XAxis,
  YAxisImpl as YAxis,
  TooltipImpl as Tooltip,
}

And then import it from that instead of recharts:

import { Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'path/to/file/above'

Once this issue is fixed, it’ll be easy to just remove that file and import directly from recharts.