add intersection-observer polyfill

gatsby-node.js

@@ -14,6 +14,16 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
   return config
 }
 
+// https://github.com/gatsbyjs/gatsby/issues/2288#issuecomment-334467821
+exports.modifyWebpackConfig = ({ config, stage }) => {
+  if (stage === 'build-html') {
+    config.loader('null', {
+      test: /intersection-observer/,
+      loader: 'null-loader',
+    })
+  }
+}
+
 exports.createPages = ({ boundActionCreators, graphql }) => {
   const { createPage } = boundActionCreators
 

package.json

@@ -26,6 +26,7 @@
     "gatsby-source-filesystem": "^1.5.35",
     "gatsby-transformer-json": "^1.0.17",
     "gatsby-transformer-sharp": "^1.6.24",
+    "intersection-observer": "^0.5.0",
     "react-helmet": "^5.2.0",
     "react-markdown": "^3.3.0",
     "react-transition-group": "^2.3.1"

src/components/atoms/ProjectImage.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Img from 'gatsby-image'
+import 'intersection-observer'
 import './ProjectImage.scss'
 
 const ProjectImage = ({ sizes, alt }) => (