Clevertap & Segment initialization conflict in NextJS PWA - reactjs

Question

I am currently working on a PWA in Next JS where I'm using CleverTap for notification campaigning & Segment for logging customer events.
I am facing errors in malfunctioning of CleverTap or loss of user events in Segment everytime I initialise both on app load. After root cause analysis, I suspect that the issue arises due to the scripts for CleverTap & Segment interfering with each other's initialization.
Here's some sample code regarding the initialization and usage of app, CleverTap, Segment, and pushing Clevertap notifications
For initializing CleverTap
import { Clevertap } from 'data/types/Clevertap';
import { getWindow } from './browserUtils';
import { getClevertapAccountId } from './settings';
const clevertap: Clevertap = {
event: [],
profile: [],
account: [],
onUserLogin: [],
notifications: [],
privacy: [],
};
clevertap.account.push({ id: getClevertapAccountId() });
clevertap.privacy.push({ optOut: false });
clevertap.privacy.push({ useIP: false });
const w = getWindow();
if (w) {
w.clevertap = clevertap;
}
const init = (): void => {
if (!w || !getClevertapAccountId()) return;
const wzrk = w.document.createElement('script');
wzrk.type = 'text/javascript';
wzrk.async = true;
wzrk.src = `${
w.document.location.protocol === 'https:'
? 'https://d2r1yp2w7bby2u.cloudfront.net'
: 'http://static.clevertap.com'
}/js/a.js`;
const s = w.document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wzrk, s);
};
export default clevertap;
export { init };
For initializing Segment
import { min as segmentMinSnippet } from '#segment/snippet';
import { getWindow } from 'utils/browserUtils';
import { getSegmentKey } from 'utils/settings';
const w = getWindow();
const jsSnippet = segmentMinSnippet({
apiKey: getSegmentKey(),
page: true,
load: true,
});
const initSegment = (): void => {
if (!w || !getSegmentKey()) return;
const script = document.createElement('script');
script.innerHTML = jsSnippet;
document.head.appendChild(script);
};
// eslint-disable-next-line import/prefer-default-export
export { initSegment };
Calling both initialization functions on _app.tsx start
import CssBaseline from '#material-ui/core/CssBaseline';
import AppContent from 'features/core/AppContent';
import NavProgress from 'features/core/AppContent/NavProgress';
import WithTheme from 'features/core/theme/WithTheme';
import buildEnvConfig from 'features/core/useEnvConfig/buildEnvConfig';
import EnvConfigContext from 'features/core/useEnvConfig/EnvConfigContext';
import EnvConfigVariantContext from 'features/core/useEnvConfig/EnvConfigVariantContext';
import getEnvConfigVariantFromCookie from 'features/core/useEnvConfig/getEnvConfigVariantFromCookie';
import { setEnvConfig } from 'features/core/useEnvConfig/staticEnvConfig';
import 'i18n';
import type { AppProps } from 'next/app';
import NextHead from 'next/head';
import React, { useEffect, useMemo } from 'react';
import 'styles/global.css';
import { init as initClevertap } from 'utils/clevertap';
import { init as initHotjar } from 'utils/hotjar-manager';
import { initSegment } from 'utils/segment';
const BizMartApp = (props: AppProps): React.ReactNode => {
const { Component, pageProps } = props;
useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement?.removeChild(jssStyles);
}
}, []);
useEffect(() => {
setTimeout(() => {
initHotjar();
initClevertap();
initSegment();
});
}, []);
const envConfigVariant = useMemo(() => getEnvConfigVariantFromCookie(), []);
const envConfig = useMemo(() => {
const ec = buildEnvConfig(envConfigVariant);
setEnvConfig(ec);
return ec;
}, [envConfigVariant]);
return (
<>
<NextHead>
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
</NextHead>
<WithTheme>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<NavProgress />
<EnvConfigVariantContext.Provider value={envConfigVariant}>
<EnvConfigContext.Provider value={envConfig}>
<AppContent>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<Component {...pageProps} />
</AppContent>
</EnvConfigContext.Provider>
</EnvConfigVariantContext.Provider>
</WithTheme>
</>
);
};
export default BizMartApp;
Calling Clevertap notification modal
As a hack, I ran them in a non-blocking mode. I simply initialized CleverTap => added delay of 1 second => initialized Segment.
This seemed to work just fine, except that the user events in the 1st second were not logged by Segment.
I implemented the following hacky solution by calling initSegment after a 1 second delay as opposed to the earlier version in _app.tsx:
Changes in _app.tsx
....
useEffect(() => {
setTimeout(() => {
initHotjar();
initClevertap();
});
setTimeout(() => {
initSegment();
}, 1000);
}, []);
....
While the above hacked worked great in initializing & making CleverTap & Segment work in a non-blocking way & we can even use a debounce on all user Segment events happening in the 1st second, to not lost them; is there a way in which we can achieve both of this without this setTimeout hack ?