polyfill IntersectionObserver

ref: gatsbyjs/gatsby#10435
measurableai · Feb 5, 2020 · 277a5ac · 277a5ac
1 parent 6678047
commit 277a5ac
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -12,3 +12,9 @@ import theme from "./src/theme"
 export const wrapRootElement = ({ element }) => (
   <ThemeProvider theme={theme}>{element}</ThemeProvider>
 )
+
+export const onClientEntry = async () => {
+  if (typeof IntersectionObserver === `undefined`) {
+    await import(`intersection-observer`)
+  }
+}
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "gatsby-source-filesystem": "^2.1.39",
     "gatsby-source-wordpress": "^3.1.53",
     "gatsby-transformer-sharp": "^2.3.6",
+    "intersection-observer": "^0.7.0",
     "jsdom": "^15.2.1",
     "lottie-web": "^5.6.0",
     "normalize.css": "^8.0.1",

diff --git a/yarn.lock b/yarn.lock
@@ -6949,6 +6949,11 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
+intersection-observer@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.7.0.tgz#ee16bee978db53516ead2f0a8154b09b400bbdc9"
+  integrity sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==
+
 intl-format-cache@^4.2.13:
   version "4.2.13"
   resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.2.13.tgz#7f3df3de048dc87353391cd75760b98b596060da"