fix(initClient): await moving helmet scripts to prevent race condition

americanexpress · Jul 20, 2021 · c0e17b1 · c0e17b1
1 parent b3eece0
commit c0e17b1
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/client/initClient.jsx b/src/client/initClient.jsx
@@ -29,7 +29,7 @@ export default async function initClient() {
   try {
     // eslint-disable-next-line no-underscore-dangle
     setModuleMap(global.__CLIENT_HOLOCRON_MODULE_MAP__);
-    moveHelmetScripts();
+    const helmetScriptsMoved = moveHelmetScripts();
 
     const store = initializeClientStore();
     const history = browserHistory;
@@ -69,6 +69,9 @@ export default async function initClient() {
 
     const render = renderMode === 'render' ? ReactDOM.render : ReactDOM.hydrate;
 
+    // Don't render until react-helmet scripts have been moved to prevent race condition
+    await helmetScriptsMoved;
+
     render(
       <App />,
       document.getElementById('root')

diff --git a/src/client/prerender.js b/src/client/prerender.js
@@ -45,11 +45,15 @@ export function loadPrerenderScripts(initialState) {
 }
 
 export function moveHelmetScripts() {
+  let resolve;
+  const promise = new Promise((res) => { resolve = res; });
   document.addEventListener('DOMContentLoaded', () => {
-    const helmetScripts = [...document.querySelectorAll('script[data-react-helmet]')];
+    const helmetScripts = [...document.body.querySelectorAll('script[data-react-helmet]')];
     helmetScripts.forEach((script) => document.body.removeChild(script));
     helmetScripts.forEach((script) => document.head.appendChild(script));
+    resolve();
   });
+  return promise;
 }
 
 export function loadServiceWorker({ dispatch, config }) {