Recharts 2.0.8 <ResponsiveContainer> </ResponsiveContainer> not working in IE11

Question

I am running into a issue where I am not able to use Rechart's <ResponsiveContainer></ResponsiveContainer> in IE11.

<ResponsiveContainer width="100%" height={x + (y ? 10 : 0)}>
                    <BarChart...>
</BarChart>
</ResponsiveContainer>

while the above code works well with other browsers but with IE 11, I get below error:

The above error occurred in the component: in ResizeDetector (created by ResponsiveContainer) in ResponsiveContainer (at chart-widget.tsx:286) in div (at chart-widget.tsx:285)

Consider adding an error boundary to your tree to customize e

As soon as I change <ResponsiveContainer></ResponsiveContainer> tags with simple <div></div> tag as below, charts are rendered properly in IE11.

<div width="100%" height={x + (y ? 10 : 0)}>
                    <BarChart...>
</BarChart>
</div>

Can anyone help me why the <ResponsiveContainer> tag is not working in IE11 and how can I get this working?

Thanks in advance

Answer 1

I tried with [email protected] and I get the same error. The error occurs because ResizeDetector use ResizeObserver who is not supported by IE. Using this polyfill fix the problem:

npm install resize-observer-polyfill

In your index.js:

import 'resize-observer-polyfill/dist/ResizeObserver.global'

With [email protected] the problem is solved.