React App not initializing in Safari

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? :pray:

// 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

Hi @Kyle_Robinson

Can you try changing both useEffect hooks to useLayoutEffect and see if it works?

Thanks.

3 Likes

@Asif I can confirm this works :heavy_check_mark:

Thank you very much!

I suggest updating the documentation, as my code does not diverge too much from the sample code provided.