Breaks imports

[tpettrov]

After adding to .babelrc config, reduces the bundle but breaks imports and is unusable.

versions:

"react": "^16.14.0",
"@babel/cli": "^7.13.14",
"@babel/core": "^7.13.14",
"recharts": "^2.0.8"

[martinschayna]

The same error in my project, versions:

    "babel-plugin-recharts": "2.0.0",
    "recharts": "2.0.9",

    "@babel/cli": "7.13.14",
    "@babel/core": "7.13.14",
    "@babel/node": "7.13.13",
    "@babel/parser": "7.13.13",
    "@babel/plugin-proposal-class-properties": "7.13.0",
    "@babel/plugin-proposal-decorators": "7.13.5",
    "@babel/plugin-proposal-export-default-from": "7.12.13",
    "@babel/plugin-proposal-export-namespace-from": "7.12.13",
    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/plugin-transform-object-assign": "7.12.13",
    "@babel/plugin-transform-react-constant-elements": "7.13.13",
    "@babel/plugin-transform-runtime": "7.13.10",
    "@babel/plugin-transform-template-literals": "7.13.0",
    "@babel/preset-env": "7.13.12",
    "@babel/preset-flow": "7.13.13",
    "@babel/preset-react": "7.13.13",
    "@babel/register": "7.13.14",

[burtyish]

Ran into the same issue. Watching this issue.

I don't recommend this, but here's a little trick I found that you could do if you must.
Since the recharts npm package is distributed with the source code included (for some reason), you could import each component specifically, like this:

import { BarChart } from "recharts/es6/chart/BarChart";
import { ResponsiveContainer } from "recharts/es6/component/ResponsiveContainer";
import { YAxis } from "recharts/es6/cartesian/YAxis";
import { XAxis } from "recharts/es6/cartesian/XAxis";
import { Bar } from "recharts/es6/cartesian/Bar";

or from recharts/src/... for the typescript source.

[cherepanov]

the same. on my setup this caused by TS option. and i see no difference compared with tree shaking by webpack

        "esModuleInterop": true,

[nahoc]

Ran into the same issue. Watching this issue.

I don't recommend this, but here's a little trick I found that you could do if you must. Since the recharts npm package is distributed with the source code included (for some reason), you could import each component specifically, like this:

import { BarChart } from "recharts/es6/chart/BarChart";
import { ResponsiveContainer } from "recharts/es6/component/ResponsiveContainer";
import { YAxis } from "recharts/es6/cartesian/YAxis";
import { XAxis } from "recharts/es6/cartesian/XAxis";
import { Bar } from "recharts/es6/cartesian/Bar";

or from recharts/src/... for the typescript source.

Yes, but this reverts the tree-shaking, so there is not point in doing so.