use countly-sdk-web in NextJs

I plan to use Countly for user usage data analytics. but when I import an error occurs which causes chrome to display Internal Server Error and on the chrome console it says Failed to load resource: the server responded with a status of 500 (Internal Server Error) but in the terminal it says ReferenceError: Element is not defined

this is my code

async componentDidMount() {
    let Countly = Countly;
    Countly.q = Countly.q;
    Countly.app_key = "myAppKey";
    Countly.url = "muUrl.Key";
    Countly.q.push(["track_sessions"]);
    Countly.q.push(["track_pageview"]);

    (function() {
      let cly = document.createElement("script");
      cly.type = "text/javascript";
      cly.async = true;
      cly.src =
        "https://cdnjs.cloudflare.com/ajax/libs/countly-sdk-web/19.2.1/countly.min.js";
      cly.onload = function() {
        Countly.init();
      };
      let s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(cly, s);
    })();
  }

[itsiprikshit]

Hi, You can refer to https://github.com/Countly/countly-sdk-web/blob/master/samples/react/src/App-WithRouter.js to integrate Countly into your application. Make sure you load Countly in your root component. Let me know if it was helpful or not.

[jacknewberry]

We are still having this issue where Countly is throws a ReferenceError when it is imported.

I would expect the library to only begin interacting with the DOM (or doing anything) when init is called. That would allow consumers of the library to control when initialisation occurs.

It is confusing to provide a method to trigger initialisation, but also begin initialising the sdk and interacting with the window at import time.

Moving initialisation activities so that they are only triggered when the sdk consumer expects would make the library more flexible, and unblock the client teams who have commented on this ticket.