recharts / babel-plugin-recharts

babel-plugin-recharts

Note: This project is currently unmaintained and does not work with recharts 2.0 and above

A babel plugin help you import less Recharts modules.

install

$ npm i -D babel-plugin-recharts

Example

The plugin automatically compiles recharts import, like this:

import { Line, Area, Pie, Treemap, Cell } from 'recharts';

babel plugin will be parsed into:

"use strict";

require("recharts/lib/polyfill.js");

var _Line = _interopRequireDefault(require("recharts/lib/cartesian/Line.js"));

var _Area = _interopRequireDefault(require("recharts/lib/cartesian/Area.js"));

var _Treemap = _interopRequireDefault(require("recharts/lib/chart/Treemap.js"));

var _Pie = _interopRequireDefault(require("recharts/lib/polar/Pie.js"));

var _Cell = _interopRequireDefault(require("recharts/lib/component/Cell.js"));

var _recharts = _interopRequireDefault(require("recharts"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

Hence you end up loading less modules.

Usage

You can choose to either edit your custom Babel configuration or your Webpack configuration. Both options work..

.babelrc

{
  "plugins": ["recharts"]
  ...
}

webpack.config.js

'module': {
  'loaders': [{
    'loader': 'babel-loader',
    'test': /\.js$/,
    'exclude': /node_modules/,
    'query': {
      'plugins': ['recharts'],
      ...
    }
  }]
}

Limitations

• You must use ES2015 imports to load recharts

License

MIT

Copyright (c) 2015-2021 Recharts Group

babel-plugin-recharts's Issues

README imports don't make sense

The readme has the following example. In the example the resulting code seems to be importing things like Line, TreeMap, Pie, etc which are not in the original import, and is missing the things in the actual import.

The plugin automatically compiles this :

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

into this:

'use strict';

require('recharts/lib/polyfill.js');

require('core-js/es6/math');

var _Line = require('recharts/lib/cartesian/Line.js');

var _Line2 = _interopRequireDefault(_Line);

var _Area = require('recharts/lib/cartesian/Area.js');

var _Area2 = _interopRequireDefault(_Area);

var _Treemap = require('recharts/lib/chart/Treemap.js');

var _Treemap2 = _interopRequireDefault(_Treemap);

var _Pie = require('recharts/lib/polar/Pie.js');

var _Pie2 = _interopRequireDefault(_Pie);

var _Cell = require('recharts/lib/component/Cell.js');

var _Cell2 = _interopRequireDefault(_Cell);

var _recharts = require('recharts');

var _recharts2 = _interopRequireDefault(_recharts);

doesn't work with next | paths.join is not a function

When using this with next.js I get the following error:

[ error ] ./pages/_app.tsx
[1] TypeError: paths.join is not a function
[1]     at Array.forEach (<anonymous>)
[1]     at Array.map (<anonymous>)
[1] [ wait ]  compiling ...
[1] > Client ready on http://localhost:3000
[1] [ error ] ./node_modules/next/dist/client/next-dev.js
[1] TypeError: paths.join is not a function
[1]     at Array.forEach (<anonymous>)
[1]     at Array.map (<anonymous>)
[1] [ wait ]  compiling ...
[1] [ error ] ./node_modules/next/dist/client/next-dev.js
[1] TypeError: paths.join is not a function
[1]     at Array.forEach (<anonymous>)
[1]     at Array.map (<anonymous>)
[1] [ wait ]  compiling ...
[1] [ error ] ./node_modules/next/dist/client/next-dev.js
[1] TypeError: paths.join is not a function
[1]     at Array.forEach (<anonymous>)
[1]     at Array.map (<anonymous>)

Incorrect path

On win 8.1 plugin generate incorrect paths:

var _Line = require('recharts/lib/cartesian\Line.js');
var _CartesianGrid = require('recharts/lib/cartesian\CartesianGrid.js');

"babel-core": "^6.22.1",
"babel-plugin-recharts": "^1.1.0",
"babel-preset-stage-2": "^6.22.0",

Node.js 12.16.* - Cannot read property 'concat' of undefined

Hello,

after upgrading nodejs to 12.16.0 I get error from babel-plugin-recharts:

TypeError: Cannot read property 'concat' of undefined
at findPath (PATH-TO-PROJECT/node_modules/babel-plugin-recharts/lib/index.js:55:26

https://github.com/recharts/babel-plugin-recharts/blob/master/src/index.js#L40

As I checked, const path is undefined.

Babel@7 support

Please add support for babel@7 and babel-loader@8
https://babeljs.io/docs/en/v7-migration

TypeError: paths.join is not a function at Function.Module._findPath

TypeError: paths.join is not a function
    at Function.Module._findPath (internal/modules/cjs/loader.js:309:56)
    at findPath (..../node_modules/babel-plugin-recharts/lib/index.js:73:34)
    at ..../node_modules/babel-plugin-recharts/lib/index.js:126:17
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (..../node_modules/babel-plugin-recharts/lib/index.js:118:21)

• recharts引用的最新版本，使用了babel-plugin-recharts，后报错。
• 在我recharts版本回退到1.8版本，就无报错，是没有兼容最新版本吗？
  --

上 typescript 后无法按需加载

This plugin is useless when use typescript.

Here is my config content

.babelrc content:

{
  "plugins": [
    "recharts"
  ],
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}

tsconfig.json content:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "preserve"
  },
  "include": [
    "./src/**/*"
  ]
}

webpack config loaders' content:

{
  test: /\.tsx?$/,
  use: [{
    loader: 'babel-loader'
  }, {
    loader: 'awesome-typescript-loader'
  }],
  exclude: /node_modules/
}

Does it work somehow for ts-loader?

We are using ts-loader instead of babel-loader.
Is there a way to make it work with this plugin?

Error in IE 9 and 10

Hello, i find bug in my project, and i create demo project

https://github.com/vaeum/babel-plugin-recharts-error

Please, clone it, install all packages and open in IE 9 -10

Error list

• not found Object.sign
• after add Object.sign polyfill error here https://s.mail.ru/F8PL/pq6KrVpor

Failed to compile after upgraded to 2.0.0

Due to #20 I continue to upgrade but also found

and I have checked recharts folder in node_module it's no have 'polyfill.js' file as the screenshot

Try to upgrade
Recharts @2.0.9
Babel-plugin-recharts @2.0.0

After upgraded Recharts to v2.0.2, cannot run the project

I have upgraded Recharts from v1.8.5 to v2.0.2 but got this error when start my project

If I remove ["recharts"] from .babelrc it works but I will lose the ability of babel-plugin-recharts

Recharts v2.0.2
babel-plugin-recharts v1.2.1

Does not work with recharts 2.8.0

Hello, it seems this plugin does not work anymore with recharts 2.8.0. The paths inside node_modules/recharts are different. The plugin expects sources in recharts\src\index.ts but 2.8.0 has only es6,lib,types,umd directories inside node_modules/recharts

Integrate With CRA

How to make it work with Create React App without ejecting. There is no babelrc or webpack.config to add the plugin.

babel.rc + webpack.config.js ?

Do you need to configure both babel.rc and webpack.config.js to use this plugin, or only one of the options?

Option to compile to /es6/ instead of /lib/ paths

Just an idea. I wonder if it'd be useful to support the option of compiling imports to /es6/ instead of /lib/ paths, if you are working in a recent version of Webpack, or another environment that can load ES6 compatible code.

Maybe a plugin option?

// .babelrc
{
  "plugins": [
    ["babel-plugin-recharts", { "es6": true }]
  }
}

TypeError: absPath.indexOf is not a function

ERROR in ./src/index.js
Module build failed (from ./node_modules/_babel-loader@8.0.6@babel-loader/lib/index.js):
TypeError: absPath.indexOf is not a function
at findPath (E:\repo\data-ui\node_modules_babel-plugin-recharts@1.2.0@babel-plugin-recharts\lib\index.js:75:100) ...

Received above error when I run my project with "recharts": "^2.0.0-beta.1" and "babel-plugin-recharts": "^1.2.0" installed. I end up getting it to work by tweak the following line (59) of \node_modules_babel-plugin-recharts@1.2.0@babel-plugin-recharts\lib\index.js:

From

var fullPath = _path.default.resolve(rechartsSrcPath, source.indexOf('.js') >= 0 ? source : ${source}.js);

To

var fullPath = _path.default.resolve(rechartsSrcPath, source.indexOf('.js') >= 0 ? source : ${source}.js).replace('\src\', '\lib\');

Can't find anything about it online so far...

Breaks imports

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"

Plugin not working.

Recharts is an amazing library but my build size is bloating up to 3.11mb.

I installed this using and added recharts to babel-loader plugins, but I get the following error (for every imported component)

ERROR in ./app/src/components/dashboard/elements/charts/Clicks.js Module not found: Error: Cannot resolve module 'recharts/component/ResponsiveContainer' in /Users/shivekkhurana/Documents/WIP/Convfy/c onvfy-frontend/app/src/components/dashboard/elements/charts @ ./app/src/components/dashboard/elements/charts/Clicks.js 37:27-76

How to go about this Sir ?

• "react": "^15.1.0",
• "react-dom": "^15.1.0",
• "recharts": "^0.12.3",

Thank you