title: Gatsby - IntersectionObserver is not defined
body: <p>I am trying to build my gatsby project but I am unable due to the IntersectionObserver not being recognized. I use the intersectionObserver inside an InView component:</p>
  <pre><code>import React, { useRef, useState, useEffect } from 'react'
  
  
  const InView = ({ children }) =&gt; {
      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) =&gt; {
          const first = entries[0]
          const { boundingClientRect } = first
          first.isIntersecting &amp;&amp; setInView(true)
          !first.isIntersecting &amp;&amp; setInView(false)
          boundingClientRect.y &gt; boundingClientY &amp;&amp; setDirection('down')
          boundingClientRect.y &lt; boundingClientY &amp;&amp; setDirection('up')
          boundingClientY &amp;&amp; setBoundingClientY(first.boundingClientRect.y)
  
      }))
  
  
      useEffect(() =&gt; {
          const currentElement = element
          const currentObserver = observer.current
          currentElement &amp;&amp; currentObserver.observe(currentElement)
          // console.log(currentObserver)
          return () =&gt; {
              currentElement &amp;&amp; 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 (
          &lt;div ref={setElement} style={styles}&gt;
  
              {children}
  
          &lt;/div&gt;
      )
  }
  
  export default InView
  </code></pre>
  <p>I have a wrapper for the root element to enable a global state and have tried importing the polyfill inside gatsby-browser.js:</p>
  <pre><code>import React from 'react'
  import GlobalContextProvider from './src/components/context/globalContextProvider'
  
  export const wrapRootElement = ({ element }) =&gt; {
      return (
          &lt;GlobalContextProvider&gt;
              {element}
          &lt;/GlobalContextProvider&gt;
      )
  }
  
  export const onClientEntry = async () =&gt; {
      if (typeof IntersectionObserver === `undefined`) {
          await import(`intersection-observer`);
      }
  }
  </code></pre>