diff --git a/apps/api-server/src/util/react-check.js b/apps/api-server/src/util/react-check.js index 80049749b..28a585ff5 100644 --- a/apps/api-server/src/util/react-check.js +++ b/apps/api-server/src/util/react-check.js @@ -18,8 +18,9 @@ module.exports = ` function checkReactDom() { if (!hasReactDom && !window.OpenStadReactDOMLoaded) { - + console.log ('!hasReactDom && !window.OpenStadReactDOMLoaded'); if (window.OpenStadReactDOMIsLoading) { + console.log ('window.OpenStadReactDOMIsLoading'); document.addEventListener('OpenStadReactDomLoaded', renderWidget); return; } @@ -35,6 +36,7 @@ module.exports = ` // Get same version of react-dom as react, ensuring we have a xx.x.x format if (!/18\.\d{1,2}\.\d{1,2}/.test(reactVersion) === false) { + console.log('react version is not 18'); throw new Error('React version 18 is required'); } @@ -48,6 +50,7 @@ module.exports = ` } document.addEventListener('OpenStadReactDomLoaded', renderWidget); triggerEvent('OpenStadReactDomLoaded'); + console.log ('react dom on load'); } document.body.appendChild(script); window.OpenStadReactDOMLoaded = true; @@ -55,13 +58,17 @@ module.exports = ` typeof ReactDOM !== 'undefined' && ReactDOM.version.substr(0, 2) !== '18' ) { + console.log ('react dom not version 18'); throw new Error('ReactDOM version 18 is required'); } else { + console.log ('react dom check else'); window.OpenStadReactDOMLoaded = true; if (typeof window.OpenStadReactDomLoadedEventHasFired === 'undefined' || !window.OpenStadReactDomLoadedEventHasFired) { + console.log ('typeof window.OpenStadReactDomLoadedEventHasFired === undefined || !window.OpenStadReactDomLoadedEventHasFired'); document.addEventListener('OpenStadReactDomLoaded', renderWidget); } else { + console.log ('else van typeof window.OpenStadReactDomLoadedEventHasFired === undefined || !window.OpenStadReactDomLoadedEventHasFired'); renderWidget(); } } @@ -70,9 +77,9 @@ module.exports = ` const hasReact = typeof React !== 'undefined'; const hasReactWithScheduler = hasReact && typeof React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED !== 'undefined' && typeof React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler !== 'undefined' && typeof React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_scheduleCallback !== 'undefined'; const hasReactDom = typeof ReactDOM !== 'undefined'; - const isLocalhost = window.location.hostname === 'localhost'; if (!hasReact && !window.OpenStadReactLoaded) { + console.log ('!hasReact && !window.OpenStadReactLoaded'); const script = document.createElement('script'); script.src = '${reactJs}'; script.onload = (e) => { @@ -83,38 +90,30 @@ module.exports = ` document.body.appendChild(script); window.OpenStadReactLoaded = true; } else if (hasReact && React.version.substr(0, 2) < '18') { + console.log ('react version is not 18'); throw new Error('React version 18 is required'); } else if (hasReact && !hasReactWithScheduler && !window.OpenStadReactLoaded) { + console.log ('hasReact && !hasReactWithScheduler && !window.OpenStadReactLoaded'); + console.log ('Loading React 18.3.1 UMD version -- current version is without Scheduler which means React DOM won\\'t load correctly.'); + const script = document.createElement('script'); script.src = '${reactJs}'; script.onload = (e) => { + console.log ('react js onload'); checkReactDom(); } document.body.appendChild(script); window.OpenStadReactLoaded = true; - } else if ( isLocalhost) { - - // For localhost the loading process is different. - if (hasReact && hasReactWithScheduler && !hasReactDom) { - window.OpenStadReactLoaded = true; - checkReactDom(); - } else if (hasReact && hasReactWithScheduler && hasReactDom) { - document.addEventListener('OpenStadReactDomLoaded', renderWidget); - - if (!window.OpenStadReactDOMLoaded) { - window.OpenStadReactLoaded = true; - window.OpenStadReactDOMLoaded = true; - triggerEvent('OpenStadReactDomLoaded'); - } - } - } else { + console.log ('react check else'); if (typeof window.OpenStadReactDomLoadedEventHasFired === 'undefined' || !window.OpenStadReactDomLoadedEventHasFired) { + console.log ('typeof window.OpenStadReactDomLoadedEventHasFired === undefined || !window.OpenStadReactDomLoadedEventHasFired'); // React has been loaded by a previous component on the page, render the widget when ReactDOM is loaded checkReactDom(); } else { + console.log ('else van typeof window.OpenStadReactDomLoadedEventHasFired === undefined || !window.OpenStadReactDomLoadedEventHasFired'); renderWidget(); } } -`; +`; \ No newline at end of file