How to integrate this sdk with ‘Ant Design Pro’?

[magicgw0928]

When I try to using this web sdk in my 'Ant Design Pro' project (https://github.com/ant-design/ant-design-pro), and I refer to the React example code. but it looks like can not integrate properly.
I add those code below into src/app.tsx
import Countly from 'countly-sdk-web';
window.Countly = Countly;
Countly.init({
app_key: 'my_appkey',
url: 'http://xxx.xx.xxx.xx'
});
I use npm start and then get the error at Chrome console log ‘Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'init')’
Can some help of this?

[turtledreams]

Hello there, it seems like you are trying to initialize Countly before it has been recognized yet. It would be best to expose it to DOM as soon as possible and initialize later, so re-confirm your load order Also you might try to integrate it async : https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#minimal-setup

[magicgw0928]

Hello there, it seems like you are trying to initialize Countly before it has been recognized yet. It would be best to expose it to DOM as soon as possible and initialize later, so re-confirm your load order Also you might try to integrate it async : https://support.count.ly/hc/en-us/articles/360037441932-Web-analytics-JavaScript-#minimal-setup

Thanks. I try to add code below, then it can push event data to countly server.
(function() { var cly = document.createElement('script'); cly.type = 'text/javascript'; cly.async = true; // Enter url of script here (see below for other option) cly.src = 'https://cdn.jsdelivr.net/npm/countly-sdk-web@latest/lib/countly.min.js'; cly.onload = function(){Countly.init()}; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s); })();