Reactjs Gatsby-未定义IntersectionObserver

我正试图建立我的盖茨比项目，但我不能，因为IntersectionObserver没有被认可。我在InView组件中使用intersectionObserver：

import React, { useRef, useState, useEffect } from 'react'


const InView = ({ children }) => {
    const [boundingClientY, setBoundingClientY] = useState(null)
    const [direction, setDirection] = useState(null)
    const [element, setElement] = useState(null)
    const [inView, setInView] = useState(false)



    const observer = useRef(new IntersectionObserver((entries) => {
        const first = entries[0]
        const { boundingClientRect } = first
        first.isIntersecting && setInView(true)
        !first.isIntersecting && setInView(false)
        boundingClientRect.y > boundingClientY && setDirection('down')
        boundingClientRect.y < boundingClientY && setDirection('up')
        boundingClientY && setBoundingClientY(first.boundingClientRect.y)

    }))


    useEffect(() => {
        const currentElement = element
        const currentObserver = observer.current
        currentElement && currentObserver.observe(currentElement)
        // console.log(currentObserver)
        return () => {
            currentElement && currentObserver.unobserve(currentElement)
        };
    }, [element])

    const styles = {
        opacity: inView ? 1 : 0,
        transform: `
            translateY(${!inView ?
                direction === 'up' ? '-20px' : '20px'
                : 0})
            rotateY(${!inView ? '35deg' : 0})
            scale(${inView ? 1 : 0.9})
            `,
        transition: 'all 0.4s ease-out 0.2s'
    }

    return (
        <div ref={setElement} style={styles}>

            {children}

        </div>
    )
}

export default InView

import React，{useRef，useState，useffect}来自“React”
const InView=（{children}）=>{
常量[boundingClientY，setBoundingClientY]=useState（null）
const[direction，setDirection]=useState（null）
常量[element，setElement]=useState（null）
const[inView，setInView]=useState（false）
const observer=useRef（新的IntersectionObserver（（条目）=>{
const first=条目[0]
常量{boundingClientRect}=first
first.isIntersecting&&setInView（true）
！first.isIntersecting&&setInView（false）
boundingClientRect.y>boundingClientY&&setDirection（'down'））
boundingClientRect.y{
常量currentElement=元素
const currentObserver=observer.current
currentElement&¤tObserver.observe（currentElement）
//console.log（currentObserver）
return（）=>{
currentElement&¤tObserver.unobserve（currentElement）
};
}，[元素]）
常量样式={
不透明度：inView？1:0，
转换：`
translateY（${！查看？
方向===“向上”？“-20px”：“20px”
: 0})
rotateY（${！inView？'35deg'：0}）
比例（${inView？1:0.9}）
`,
过渡：“所有0.4缓解0.2”
}
返回(
{儿童}
)
}
导出默认视图

我为根元素提供了一个包装器来启用全局状态，并尝试在gatsby-browser.js中导入polyfill：

import React from 'react'
import GlobalContextProvider from './src/components/context/globalContextProvider'

export const wrapRootElement = ({ element }) => {
    return (
        <GlobalContextProvider>
            {element}
        </GlobalContextProvider>
    )
}

export const onClientEntry = async () => {
    if (typeof IntersectionObserver === `undefined`) {
        await import(`intersection-observer`);
    }
}

从“React”导入React
从“./src/components/context/GlobalContextProvider”导入GlobalContextProvider
导出常量wraproteElement=（{element}）=>{
返回(
{element}
)
}
export const onclientry=async（）=>{
if（IntersectionObserver的类型==`undefined`）{
等待导入（`intersection observer`）；
}
}

这是一个构建错误，对吧（$gatsby build）？如果是这种情况，这与浏览器支持无关

事实上，

IntersectionObserver

是一个浏览器API，在服务器端渲染期间不应使用浏览器API。相反，您尝试在安装组件后使用它们。要解决此问题，请在

useffect（）

中初始化观察者，而不是像当前那样在

useRef（）

中初始化观察者

...
const observer = useRef();

useEffect(() => {
  observer.current = new IntersectionObserver({ ... });
}, []); // do this only once, on mount
...