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


My Next.js website is using a slider

It works great, but not on Safari, either Desktop or iPhone. here is my website

Close to the bottom of page I am using a comparison slider, this is causing the error.

I googled it, and it looks like many sliders have this issue on Safari, and the solution is to add a polyfill (https://www.npmjs.com/package/resize-observer-polyfill), which I did (I think) but it still doesn’t work.. This is my full page code.

To summarize, it works on Firefox and Chrome, but not Safari

import ResizeObserver from 'resize-observer-polyfill';
import Head from 'next/head'
import Link from 'next/link'
import Image from 'next/image'
import ContainerFull from '../components/container-full'
import HomeStories from '../components/home-stories'
import MyCarousel from '../components/carousel'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getHomePage, getHomeSlides, getAllPostsForLanding } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
import Col from 'react-bootstrap/Col'
import Row from 'react-bootstrap/Row'
import Container from 'react-bootstrap/Container'

import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

export default function Page( {page, finearts, allTeases: { edges }} ) {

const allTeases = edges.slice(1)    

  return (
          <title>{ page.seo.title }</title>
          <meta name="description" content={page.seo.metaDesc} />
       <Header />
        <Container fluid>
          <Col className="wrap-carousel">
                <MyCarousel finearts={finearts} />


      <Container className="pad-row-bottom">
                <Col xs={12}>
                    <h1>{ page.title }</h1>
                        <div dangerouslySetInnerHTML={{ __html: page.content }} />



    <Container fluid className="home-blog pad-row-bottom">
                <Col xs={12}>   <h2>Art Shows / News / Blog</h2></Col>
                {allTeases.length > 0 && <HomeStories posts={allTeases} />}
        <Container className="pad-row-bottom pad-row-top">
                <Col  xs={12} md={9}>
                    <h2>Commissioned Artwork</h2>
                            I can create a stunning pixel painting from any photograph provided. It could be yourself, family member, favourite celebrity, family pet, landcape, or just about anything.<br /><br />
                            All the artwork I create starts from a photo, which I use as reference to create an Op Art Painting. From close up, the paintings are close to abstract, but as you step away they come into focus.
                            <br /><br />
                            <strong>Call me today at  <a href="tel:416.450.5439">416.450.5439</a> to get a quote and get started on your personalized painting today.</strong>
                <Col  xs={12} md={3}>               
  itemOne={<ReactCompareSliderImage src="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-pixel-portrait_jqm50p.jpg" srcSet="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-pixel-portrait_jqm50p.jpg" alt="Image one" />}
  itemTwo={<ReactCompareSliderImage src="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-original_wj8pjf.jpg" srcSet="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-original_wj8pjf.jpg" alt="Image two" />}




export async function getStaticProps({ preview = false }) {
  const allTeases = await getAllPostsForLanding(preview)         
  const data = await getHomePage()
  const fineart = await getHomeSlides()
  return {
    props: {
      page: data,
      finearts: fineart,


I got in touch with the developer and we worked it out (this one is much cooler than css one and works on mobile)

import { install } from "resize-observer";

// if you use next.js, use this

if (typeof window !== "undefined") {

// if you don't use next.js, this should work

Leave a Reply

Your email address will not be published. Required fields are marked *