use countly-sdk-web in NextJs about countly-sdk-web HOT 6 CLOSED

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.

from countly-sdk-web.

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

from countly-sdk-web.

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.

from countly-sdk-web.

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

from countly-sdk-web.

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!

from countly-sdk-web.

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.

from countly-sdk-web.