fix(theme): load polyfill for IntersectionObserver API, when necessary (

#737)

.changeset/perfect-drinks-rescue.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-docs/gatsby-theme-docs': patch
+---
+
+Load polyfill for `IntersectionObserver` API.

packages/gatsby-theme-docs/gatsby-browser.js

@@ -26,21 +26,23 @@ const injectScript = (url, attributes = {}, onLoad) => {
   document.body.appendChild(script);
 };
 
-export const onClientEntry = (
+export const onClientEntry = async (
   _, // eslint-disable-line
   pluginOptions
 ) => {
   if (isProduction) {
-    require.ensure(['@sentry/browser'], (require) => {
-      const Sentry = require('@sentry/browser');
-      Sentry.init({
-        dsn:
-          'https://e43538aae75e412eb16b27d8011f5a8b@o32365.ingest.sentry.io/1819068',
-        release: commitSha,
-        environment: pluginOptions.websiteKey,
-        allowUrls: ['docs.commercetools.com', 'now.sh', 'vercel.app'],
-      });
+    const Sentry = await import('@sentry/browser');
+    Sentry.init({
+      dsn:
+        'https://e43538aae75e412eb16b27d8011f5a8b@o32365.ingest.sentry.io/1819068',
+      release: commitSha,
+      environment: pluginOptions.websiteKey,
+      allowUrls: ['docs.commercetools.com', 'now.sh', 'vercel.app'],
     });
+
+    if (typeof IntersectionObserver === 'undefined') {
+      await import('intersection-observer');
+    }
   }
   // Inject the cookie consent scripts only if the page is served on the domain `*.commercetools.com`.
   if (window && window.location.host.includes('.commercetools.com')) {
@@ -57,9 +59,11 @@ export const onClientEntry = (
   // Require additional Prism languages.
   // Inspired by https://github.com/facebook/docusaurus/pull/2250.
   window.Prism = Prism;
-  (pluginOptions.additionalPrismLanguages || []).forEach((lang) => {
-    require(`prismjs/components/prism-${lang}`); // eslint-disable-line
-  });
+  await Promise.all(
+    (pluginOptions.additionalPrismLanguages || []).map((lang) =>
+      import(`prismjs/components/prism-${lang}`)
+    )
+  );
   delete window.Prism;
 };
 

packages/gatsby-theme-docs/package.json

@@ -54,6 +54,7 @@
     "gatsby-transformer-yaml": "2.4.15",
     "github-slugger": "1.3.0",
     "hast-util-heading": "1.0.4",
+    "intersection-observer": "0.11.0",
     "lodash.throttle": "4.1.1",
     "moment": "2.29.1",
     "prismjs": "1.22.0",

yarn.lock

@@ -12984,6 +12984,11 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+intersection-observer@0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.11.0.tgz#f4ea067070326f68393ee161cc0a2ca4c0040c6f"
+  integrity sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ==
+
 intl-messageformat-parser@^6.0.10:
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-6.0.10.tgz#6202bd4e9b59eaa5bf34d4db2ef8c2af46d40037"