React-chartjs-2: Charts not rendering in IE

[dyarwood]

I've included the latest versions 2.0.5 in my project and in IE the charts are failing to render. Chrome and FF are fine. On your demo page the charts also don't render in IE. I have looked through the issues which start this is fixed but this doesn't seem to be the case. I have downloaded the latest code and run it and in IE I get the .assign issue. Downloading the zipped code and trying to run the npm install fails as well.

[jerairrest]

Do you have any errors from Firebug? I was under the impression Object.assign was removed from this project

[dyarwood]

Actually looks like it does work sorry. It was a similar error but not in your plugin. The example page might want updating though as that is what made me think it was react-chartjs-2 as they don't work in IE11

[Benvorth]

The Problem still exists, try to open the demo page in IE results in

[adamsafr]

IE 11: Same problem. But console in developer tools isn't showing any errors.

react-chartjs-2 v2.1.0
chart.js v2.6.0

[gitname]

react-chartjs-2 also uses Array.prototype.find() (here, in lib/index.js).

According to the Mozilla Developer Network website (links below), neither Object.assign() nor Array.prototype.find() are supported by Internet Explorer.

• Object.assign() browser compatibility
• Array.prototype.find() browser compatibility

Here are the final 3 items in the stack trace the create-react-app error page shows in Internet Explorer 11:

[jerairrest]

Are you using the dist or the actual package? Webpack or some other build tool?

[gitname]

I'm using the actual package. In other words, I'm using the package $ npm install installs when using this package.json file.

I'm using webpack.

[jerairrest]

Can you post what plugins you're using in webpack? Version? I was under the impression Object.assign gets turned into _extends

[gitname]

create-react-app (which I used to create the app I'm developing) includes a polyfill for Object.assign, but does not include a polyfill for Array.prototype.find.

I'm not seeing any issues with Object.assign in Internet Explorer.

I am seeing issues with Array.prototype.find in Internet Explorer, which I described in my June 23 comment above.

In that comment, I didn't mean to imply I was seeing issues with Object.assign in Internet Explorer. I just meant to point out that this project's use of Object.assign (which had been referenced in earlier comments) is similar to this project's use of Array.prototype.find in that neither are supported by Internet Explorer.

[gitname]

I don't know which webpack plugins are in use.

create-react-app effectively abstracts webpack away from me, and I'm not familiar with webpack configuration in general.

My best guess is that they are the ones listed in this webpack.config.dev.js file (when running a development build of my app), and the ones listed in this webpack.config.prod.js file (when running a production build of my app). I do see issues with Array.prototype.find in both development builds and production builds of my app.

The production build of my app is live on the internet here. When I visit it using Internet Explorer 11, I can use the developer tools built into the web browser to see the error messages related to Array.prototype.find, examine the relevant JavaScript code, etc.

[jerairrest]

This has been fixed in 2.5.0. https://github.com/jerairrest/react-chartjs-2/releases/tag/2.5.0

[gitname]

Hmm... I still see the same errors in Internet Explorer 11 as before, even now that I'm using version 2.5.0 of the NPM package. :thinking:

In the source code of version 2.5.0 of the package (i.e. on GitHub), I do see the polyfill code in src/index.js. Likewise, when I view the updated example page (i.e. http://jerairrest.github.io/react-chartjs-2/) in Internet Explorer 11, I see no errors. That's my experience with this repository.

As for the associated NPM package...

After installing version 2.5.0 of the NPM package in my project, the only place I see the polyfill code under node_modules/react-chartjs-2/ is in the file example/dist/bundle.js (i.e. on lines 2941-2984 of the file node_modules/react-chartjs-2/example/dist/bundle.js).

However, even though I do see the polyfill code in the NPM package (as described in the previous paragraph), in my deployed app (either in production mode or in development mode) I don't see the polyfill code anywhere in the web browser (e.g. not in the main.34cb0fa3.js file and not in the source-mapped node_modules/react-chartjs-2/lib/index.js file).

The production build of my app (now using version 2.5.0 of the package, although the master branch of the repository doesn't reflect that yet) is live on the internet here. When I visit that app in Internet Explorer 11, I see the same errors as before.

[jerairrest]

Ahhhh thanks so much for pointing this out. Turns out I didn't rebuild the lib or dist folders to reflect the newest versions. I just pushed 2.5.1 up with the new changes reflected. Sorry about that!

[gitname]

You're very welcome. Thanks for publishing a fix so promptly.

Using version 2.5.1 of the package, I no longer see the errors in Internet Explorer 11. :white_check_mark:

[kumarharsh]

@jerairrest - I think bundling the polyfill with the code is not the correct approach. There are also a lot of people who use babel to compile their ES6 to ES5, and in those cases, Array.find is already polyfilled via babel-polyfill or babel-runtime.

I'd suggest instead that the docs be updated to instruct users to add Array.find polyfill via core.js: https://github.com/zloirock/core-js/blob/v2.4.1/modules/es6.array.find.js.

---

BTW, I see that lodash is already being used, so why not use lodash.find too?

[jerairrest]

I agree with switching to lodash's find instead of polyfilling now that you mention it. 👍

[kumarharsh]

👍 great - although do you have any reservations against the first suggestion? I think it'd be the best of both worlds - not add code-burden for people who already use babel, and let IE11 users also enjoy this lib.

Plus, although it's invisible to the OP here, the object-assign polyfill is already being added by react-create-app - that's the only reason (s)he thinks that their react code is working in IE.

IMO, react-chartjs-2 should just instruct IE users to add the dependency to array.prototype.find. The purpose of react-create-app is to develop applications, but react-chartjs-2 is a library, and the concerns should be as little dependencies as possible.

Array.prototype.find can be added by using the core-js lib or the standalone https://www.npmjs.com/package/array.prototype.find node package.

[jerairrest]

Yea... I'm on the fence on this one. I feel like a package should resolve all its own dependencies that are one offs to minimize frustration. Not sure. For now we'll use lodash. :)

[kumarharsh]

ok. no problems. 👍