Chart.js 3+, Firefox 68 and Angular: "ReferenceError: "ResizeObserver is not defined"

user_1242827 0
Viewed 1268

I have an Angular application using Chart.js 3+ and it needs to run in Firefox 68.

Chart.js 3+ uses ResizeObserver in its code, which is not supported by that specific Firefox version.

So, when I try to load my chart in Firefox, I get the following error:

ReferenceError: "ResizeObserver is not defined"

In other browsers or newer versions of Firefox it works properly.

After some research, I read that I could install a polyfill for ResizeObserver and many suggested the following: https://github.com/juggle/resize-observer

So I installed it in my project by typing npm i @juggle/resize-observer and then added it to the polyfill.ts file:

import '@juggle/resize-observer';
import 'zone.js/dist/zone';

But the error persists. Am I missing something?

Thanks in advance.

polyfills chart.js angular
2 Answers

Looking at how others fixed it, it seems like you still need to register it to the browser before you do anything with chart.js so it can use it:

import {ResizeObserver as ResizeObserverPolyfill} from '@juggle/resize-observer';

if (typeof window !== 'undefined') {
  window.ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
}

Comming from: https://github.com/jenkins-infra/plugin-site/pull/714

user_86829830

Support for older browsers got dropped a while back, so you need a polyfill to keep chartJS working. if you have really old browser and you can't import, you can add a script from polyfill.io. It's pretty heavy, but it will be an easy fix and you can add other polyfills easily if you need.

<script type="application/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver"></script>
user_145268680
Related