Merge pull request #780 from newrelic/zack/firefox-crash-fix

Fix Firefox crash (marketo forms)
newrelic · Sep 23, 2020 · de7b44e · de7b44e
2 parents 7e03719 + 2f9bfbe
commit de7b44e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -41,10 +41,12 @@ const onInitialClientRender = () => {
     }
   }
 
-  // eslint-disable-next-line no-undef
-  MktoForms2.whenRendered(function (form) {
-    destyleMktoForm(form);
-  });
+  if (typeof window !== 'undefined' && window.MktoForms2) {
+    // eslint-disable-next-line no-undef
+    MktoForms2.whenRendered(function (form) {
+      destyleMktoForm(form);
+    });
+  }
 };
 
 const onRouteUpdate = ({ location }) => {

diff --git a/src/components/MarketoForm/MarketoForm.js b/src/components/MarketoForm/MarketoForm.js
@@ -11,9 +11,9 @@ const MarketoForm = ({
   publishableKey,
   redirectLink,
 }) => {
-  useMarketoForm(munchkinId, id, publishableKey, redirectLink);
+  const loaded = useMarketoForm(munchkinId, id, publishableKey, redirectLink);
 
-  return (
+  return loaded ? (
     <div
       css={css`
         position: relative;
@@ -40,7 +40,7 @@ const MarketoForm = ({
         <form id={`mktoForm_${id}`} />
       </div>
     </div>
-  );
+  ) : null;
 };
 
 MarketoForm.propTypes = {

diff --git a/src/hooks/useMarketoForm.js b/src/hooks/useMarketoForm.js
@@ -1,8 +1,15 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { navigate } from 'gatsby';
 
 const useMarketoForm = (munchkinId, id, publishableKey, redirectLink) => {
+  const [loaded, setLoaded] = useState(false);
+
   useEffect(() => {
+    if (!window.MktoForms2) {
+      return;
+    }
+    setLoaded(true);
+
     window.MktoForms2.loadForm(
       '//app-abj.marketo.com',
       munchkinId,
@@ -43,6 +50,8 @@ const useMarketoForm = (munchkinId, id, publishableKey, redirectLink) => {
     };
     document.body.append(script);
   }, [munchkinId, id, publishableKey, redirectLink]);
+
+  return loaded;
 };
 
 export default useMarketoForm;