recharts / babel-plugin-recharts Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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",
How to make it work with Create React App without ejecting. There is no babelrc or webpack.config to add the plugin.
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
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 ?
Thank you
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...
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 }]
}
}
Do you need to configure both babel.rc and webpack.config.js to use this plugin, or only one of the options?
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)
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
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
.
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);
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>)
We are using ts-loader
instead of babel-loader
.
Is there a way to make it work with this plugin?
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
Here is my config content
{
"plugins": [
"recharts"
],
"presets": [
"env",
"stage-0",
"react"
]
}
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "preserve"
},
"include": [
"./src/**/*"
]
}
{
test: /\.tsx?$/,
use: [{
loader: 'babel-loader'
}, {
loader: 'awesome-typescript-loader'
}],
exclude: /node_modules/
}
Please add support for babel@7 and babel-loader@8
https://babeljs.io/docs/en/v7-migration
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.