Gatsby: How to use intersection-observer polyfill in gatsby v2

[arturhenryy]

Summary

i have to use the intersection-observer polyfill in gatsby v2 and i dont know how to import it correctly. i am already using the a Provider in the gatsby-browser.js so i cannot use require here because otherwise webpack fails bundling because of mixed import / require.

gatsby-browser.js

import React from "react";
import { Provider } from "react-redux";
import createStore from "./src/store/createStore";

export const wrapRootElement = ({ element }) => {
  const store = createStore();
  const ConnectedRootElement = <Provider store={store}>{element}</Provider>;
  return ConnectedRootElement;
};

suggested way to import the polyfill

exports.onClientEntry = () => {
  // IntersectionObserver polyfill for gatsby-image (Safari, IE)
  if (typeof window.IntersectionObserver === `undefined`) {
    import(`intersection-observer`)
    console.log(`👍 IntersectionObserver is polyfilled`)
  }

  // Object-fit/Object-position polyfill for gatsby-image (IE)
  const testImg = document.createElement(`img`)
  if (
    typeof testImg.style.objectFit === `undefined` ||
    typeof testImg.style.objectPosition === `undefined`
  ) {
    import(`object-fit-images`)()
    console.log(`👍 Object-fit/Object-position are polyfilled`)
  }
}

[m-allanson]

Does it work if you do it like this?

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

[arturhenryy]

@m-allanson thanks that worked. thank you for the help mate.