Unhandled Runtime Error ReferenceError: Can't find variable: ResizeObserver on Safari

[justinblayney]

Hello,

I installed and can use this on Firefox, but it breaks on Safari, both Desktop and iPhone versions.

the error is (when run from localhost:3000)

Unhandled Runtime Error
ReferenceError: Can't find variable: ResizeObserver

I installed this to fix, but it didn't help
import ResizeObserver from 'resize-observer-polyfill';

When google this, it looks like many sliders have this issue.

I see that this issue has been closed for gatsby. My app doesn't use gatsby. I tried adding import ResizeObserver from 'resize-observer-polyfill'; and after installing it with no luck

this project uses Next.js

[nerdyman]

Hi @justinblayney, thanks for opening the issue!

Version 2 of the library removed the internal ResizeObserver polyfill as its now supported in all major browsers.

It should still be able to be polyfilled though, I think I have a fix so you'll be able to load the polyfill in your app.

[nerdyman]

Can you give this sandbox a go on your Safari? It's ok for me on 12.1 through BrowserStack.

[justinblayney]

I Just reinstalled in and deployed.. FYI, i installed your library yesterday for the first time, so I most likely had the most recent version...

here is the production link (iPhone Safari gives a friendly error, but desktop safari throws error I posted above)
https://wordpress-website-headless-v2-6056v0qjz.vercel.app/

Here is my git
https://github.com/justinblayney/wordpress-website-headless

Your code is in pages / index.js

[nerdyman]

Cool, the issue is most likely that the version of Safari doesn't support ResizeObserver. It needs to be at least 13.1 on desktop and 13.4 on iOS.

If you run npm install resize-observer and add the following code at https://github.com/justinblayney/wordpress-website-headless/blob/main/pages/index.js#L16 it should work.

import { install } from "resize-observer";

install();

Also, if possible can you try opening https://6zicv.csb.app/ on your mobile and desktop Safari to see if it works?

[justinblayney]

Hello,

that didnt work. i am using next,js and it doesn't use window (I get this error with all sorts of modules).

Your test link works on all my browsers

error

Server Error

ReferenceError: window is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

19 | install();
| ^

[justinblayney]

Hey, I found the solution

if (typeof window !== "undefined") {
install();
}

just testing on production

[justinblayney]

Its works, thanks for your help!

https://wordpress-website-headless-v2-btphyynzs.vercel.app/

[nerdyman]

Awesome! Thanks for raising the issue, I'll add a docs page to include how to add the polyfills.

[devnarayan]

I added below script ResizeObserver.min.js and issue resolved into old safari browser.

<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

This ResizeObserver.min.js is using into below script.
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.js"></script>

[nerdyman]

For anyone else running into this, I recommend installing resize-observer from npm and doing the following check in your app's entry file before you do ReactDOM.render

if (!window.ResizeObserver) install();

This is what the basic CodeSandbox demo does.

[neogruh2405]

I added below script ResizeObserver.min.js and issue resolved into old safari browser.

<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>

This ResizeObserver.min.js is using into below script. <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.js"></script>

save my life sir!