Hi!
Would really appreciate any support on this bug. It appears the app is unable to initialize in Safari, and no client object is returned by the promise.
It works fine in Chrome and Firefox, but not Safari.
The React application is successfully loading the fresh_client.js script, the onload callback is firing and the app.initialized() method is being called. However, the .then()
method is not firing. There is also no error caught by .catch()
;
When I look in the console, I can see an error (attached screenshot) in the freshconnect-sidebar-core.js
script, immediately after the app.initialized()
is called, but I am not sure it is related.
The loaded state successfully transitions to true, but there is no client object and the app does not re-render.
Any ideas?
// APP.JS
import React, { useState, useEffect } from 'react';
import SearchLinks from './features/SearchLinks';
import useScript from './hooks/useScript';
const App = () => {
const [client, setClient] = useState(null);
const { loaded } = useScript('https://static.freshdev.io/fdk/2.0/assets/fresh_client.js');
useEffect(() => {
if (loaded) {
console.log('----- SCRIPT LOADED -----');
window.app
.initialized()
.then((appClient) => {
console.log('----- SUCCESSFUL INITIALIZE ---');
setClient(appClient);
})
.catch((er) => console.log('Initialization Failed', er));
}
}, [loaded]);
if (!loaded) return <p>Loading</p>;
if (!client) return <p>Unable to initialize.</p>;
return <SearchLinks client={client} />;
};
export default App;
// USE SCRIPT HOOK
import { useState, useEffect } from 'react';
const useScript = (url) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
console.log('------------ ADDING SCRIPT ----------');
const existingScript = document.getElementById('fresh-loaded');
if (!loaded && !existingScript) {
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
script.setAttribute('id', 'fresh-loaded');
document.head.appendChild(script);
script.addEventListener('load', () => setLoaded(true));
} else if (!loaded && existingScript) {
setLoaded(true);
}
}, [url, loaded]);
return { loaded };
};
export default useScript;
Screenshot of the console inside Safari. It shows the script has loaded, and it then calls the app.initialize method. You can see the error printed below it.
Screenshot of the UI. This state indicates the script has loaded, but there is no client object