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

Total
5
Shares

My Next.js website is using a slider
https://github.com/nerdyman/react-compare-slider

It works great, but not on Safari, either Desktop or iPhone. here is my website
https://wordpress-website-headless-v2-afjayn5e2.vercel.app/

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 (
    <>
      <Layout>
        <Head>
          <title>{ page.seo.title }</title>
          <meta name="description" content={page.seo.metaDesc} />
        </Head>
       <Header />
        <ContainerFull>
         
      
        <Container fluid>
         <Row>
          <Col className="wrap-carousel">
                
                <MyCarousel finearts={finearts} />

          </Col>
         </Row>
        </Container>
        

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

                



            </Row>
        </Container>
      

    <Container fluid className="home-blog pad-row-bottom">
        <Container>
            <Row>
                <Col xs={12}>   <h2>Art Shows / News / Blog</h2></Col>
      
                {allTeases.length > 0 && <HomeStories posts={allTeases} />}
      
            </Row>
        </Container>
    </Container>            
                    
                
        <Container className="pad-row-bottom pad-row-top">
            <Row>
                <Col  xs={12} md={9}>
                    <h2>Commissioned Artwork</h2>
                        <p>
                            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>
      
                        </p>
                </Col>
      
                <Col  xs={12} md={3}>               
            
                        <ReactCompareSlider
  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" />}
/>
                        
                </Col>              
                

            </Row>
        </Container>



            
    

        
      
          
        </ContainerFull>
      </Layout>
    </>
  )
}



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

Solution

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") {
install();
}

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

install();
Leave a Reply

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