use countly-sdk-web in NextJs

[taribudii]

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.

[taribudii]

thankyou,
But I get ReferenceError: Element is not defined when I import import Countly from 'countly-sdk-web'
I've done what you gave, and I still get the same error

[itsiprikshit]

I am guessing this could be due to code transpiling in next or maybe some other case related to ssr.
So what you need to do is remove the countly-sdk-web import from your file (remove the module completely from server) and in your componentDidMount, just replace starting few lines of your code with the following and load countly from cdn (like you are already doing). Everything will be done asynchronously in the browser now (even in ssr).

let Countly = window.Countly || {};
    window.Countly = Countly;
    Countly.q = Countly.q || [];

And if still the error persists, then maybe its not because of country-sdk-web since you'd have removed the npm module of the sdk from the server. Could be something else related to your code.

[ar2rsawseen]

Closing this for now, if you still experience this issue, please reopen :)

[mateuszmolkaofficial]

It would be great if this issue could be reopened. @ar2rsawseen The problem with Next.js and Countly is that next.js works on both server and browser. On server Element is not accessible since it's specific to browser. Could you add a check to make sure Element is used in browser only?

if (process.browser) { ... a lot of code }

This one could help ;) Let me know if I can help somehow!

[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.