Recharts is not supporting in IE11 browser

[naren1213]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/recharts/recharts.git

Steps to reproduce

1. git clone https://github.com/recharts/recharts.git
2. cd recharts
3. npm install
4. npm run[-script] demo
5. Then open http://localhost:3000 in IE11 browser

What is expected?

It should support in IE11 browser

What is actually happening?

From demo, the console error is "SCRIPT1004: Expected ';' app.c0b28b51d8d4505aaa2a.js (60108,20)"
From my project, the console error is "SCRIPT1053: Const must be initialized"

Until Recharts version 1.8.5 its working fine, its broken from 2.0.0-beta.0 and 2.0.0-beta.1 versions

Environment	Info
Recharts	v2.0.0-beta.1
React	16.9.0
System	Windows 10
Browser	IE11

---

Const and let are not supported in IE11 and below versions, I think polyfill need to be included.

[mwskwong]

Just... give up on IE. Everyone knows it has bad compatibility. No one likes it anyway.

[avindra]

Const and let are not supported in IE11 and below versions, I think polyfill need to be included.

Check your application's build process. Under all the turtles, you're most likely using Webpack and ultimately, Babel. You want to make sure you're emitting ES5 or whatever IE11 needs.

[avindra]

Giving up on IE11 unfortunately isn't an option when your users are using it to access your application. There are still bits of IE11 in pockets of some userbases.

But I don't think this is a library author's concern. The application's build process needs to take care of ensuring their user's browsers are compatible.

[Anatoool]

@avindra, hi! I have the same issue.

[njetsy]

I tried following some of the suggestions at
webpack/webpack#2031
to include recharts in the build process but I am still not able to get v2.0.0-beta.1 working in IE11 :(

[Morbit]

@njetsy Hi! Do you have any news about this problem?

[matYang]

Same problem, could be an issue caused by the breaking changes introduced in v3 of d3-scale package which Recharts use: d3/d3-scale#167

[FLGMwt]

This seems to be related to the d3-* family of packages making the decision to no longer ship pre-ES2015 transpiled packages (as of 2018 https://github.com/d3/d3-array/releases/tag/v2.0.0).

I'm using babel, babel-preset-env with the default browser targets (which includes IE11), and webpack.

I fixed this for my project by updating the babel-loader test to explicitly include recharts (and by extension its transitive dependencies, d3-*) for transpilation.

Before:

{
  test: /\.(t|j)sx?$/,        
  include: path.resolve(__dirname, 'src'),
  loader: 'babel-loader',
},

After:

{
  test: /\.(t|j)sx?$/,
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules', 'recharts'),
  ],
  loader: 'babel-loader',
},

[onderonur]

I've came across the same error. It says Const must be initialized in IE11 and I think it gives this error because of for(const x of y). I'm using recharts@2.0.0-beta.1 with an ejected create-react-app.
I've tried using core-js to polyfill this but just didn't find any solution.

It runs perfectly fine in development mode. But when I create a production bundle, it just gives this error.

Edit: I've just tried the recharts@1.8.5 and there is no error in IE11.

[pom421]

I have the same problem on IE 11 and even a Firefox 38. In fact, Firefox < 51 seems to have a buggy handle of for (const i of j) construction.

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...of

[xile611]

Please try recharts@2.0.0-beta.5

[suhailgupta03]

Please try recharts@2.0.0-beta.5

Does it work with recharts@2.0.0-beta.5? I am at 2.0.0-beta.1 @xile611

[mooncakelmn]

I don't think the commit fix the issue for other projects those are using Recharts@^2, even latest beta.5. This commit only makes the Recharts demo portal works on IE 11.

@xile611 I think we should evaluate the usage for v3 of d3-scale, which is the root cause. I don't think we should expect every projects using Recharts to add following if they want to support IE 11:

          path.resolve(__dirname, '/node_modules/d3-scale'),
          path.resolve(__dirname, '/node_modules/d3-array'),
          path.resolve(__dirname, '/node_modules/d3-format'),
          path.resolve(__dirname, '/node_modules/d3-time-format'),
          path.resolve(__dirname, '/node_modules/d3-time'),
          path.resolve(__dirname, '/node_modules/d3-shape'),
          path.resolve(__dirname, '/node_modules/d3-color'),
          path.resolve(__dirname, '/node_modules/d3-interpolate'),
          path.resolve(__dirname, '/node_modules/d3-path'),

[erezcohen]

I can confirm that recharts@2.0.0-beta.5 did not resolve the issue.
Moving back to 1.8.5 fixed it for me.
I think that it should be clearly documented in the README that the beta version does not support IE (I tested on IE 11). Alternatively if there's a way to work around it in the bundling phase then that should be clearly documented. @xile611 .