未处理的运行时错误参考错误：找不到变量：Safari 上的 ResizeObserver

问题描述

我的 Next.js 网站正在使用滑块 https://github.com/nerdyman/react-compare-slider

它运行良好，但不适用于 Safari，无论是台式机还是 iPhone。这是我的网站 https://wordpress-website-headless-v2-afjayn5e2.vercel.app/

靠近页面底部我使用的是比较滑块，这是导致错误的原因。

我用谷歌搜索了一下，Safari 上的许多滑块似乎都有这个问题，解决方案是添加一个 polyfill (https://www.npmjs.com/package/resize-observer-polyfill)，我这样做了（我认为）但它仍然不起作用。 . 这是我的完整页面代码。

总而言之，它适用于 Firefox 和 Chrome，但不适用于 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,},}
}

解决方法

我与开发人员取得了联系，我们已经解决了（这个比 css 更酷，并且可以在移动设备上使用）

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