nerdyman/react-compare-slider

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

justinblayney opened this issue · 11 comments

justinblayney commented

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 commented

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 commented

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

justinblayney commented

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 commented

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?

  • 👍4
  • 🎉1
justinblayney commented

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 commented

Hey, I found the solution

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

just testing on production

  • 👍2
  • 🚀1
nerdyman commented

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

devnarayan commented

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>

  • 👍6
  • 😄1
  • 🎉3
  • ❤️3
  • 🚀4
nerdyman commented

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();

image

This is what the basic CodeSandbox demo does.

neogruh2405 commented

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!

  • 😄1
  • ❤️1
  • 🚀2