TypeError: client.on is not a function
Hi Team,
I have loaded Zendesk SDK using https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js and after load ZAFClient object is returned. However init method does not return client object instead returns false.
Code Snippet as follows:
const client = window.ZAFClient.init();
client.on('voice.dialout', function appRegistered(e: any) {
console.log("test");
});
Please suggest what should be done to get proper client object.
-
Hey Balaji,
May I ask why you're setting the ZAFClient through the window object? What happens when you call it directly?
const client = ZAFClient.init();
client.on('voice.dialout', function appRegistered(e: any) {
console.log("test");
}); -
Thank you Eric for the response
we use window object to call, as when we load Zendesk SDK in our react typescript application, ZAFClient object was getting attached to window object.
Also we tried using directly by defining class as below, still we received the same error.
declare global {
class ZAFClient {
static init(): any;
}
}Here we do use Micro Frontend architecture. So we have a nested app to load Zendesk SDK. And on initial load we find that it works for 1 time, but when we redirect for login page which is in the same domain.
After authentication when we reload the page it start failing. Here we get client as false.
Can this be due to the reason that we do redirect from our initial page to another page?
-
Hi Eric,
To further investigate the issue, we created a very simple react app just with 2 components in it.
In first component we are calling ZAFClient.init method and getting client object as expected. But as soon as we redirect to another component using history.push() or react router dom and create a new instance of client object using ZAFClient.init we are getting the value as false.
Before Redirection (In component 1)
After Redirection (In component 2)
-
Hey Balaji,
It's tough to debug without seeing your actual application. Would you mind providing a link to your example apps repository?Thanks!
-
Hi Eric,
Please find attached link (Click Here for repo link) for sample app to reproduce this issue.
For executing the app, please perform below steps in your local.
- npm install
- npm start
-
Hey Balaji,
I'm assuming you've set this up as a server side app, if that assumption is wrong - please let me know. When using a server side app you need to be providing the app_guid and origin to every page of your application so that it can continue utilizing ZAF. We cover this here.
Hope this helps!
-
Hi Eric,
This is pure client-side application created in react.
-
Hi Balaji,
To confirm, you mean that you're webpacking this down and then having it installed locally into the zendesk account (in your manifest file you'd see the location pointing at a html file, not a web address)? If that's the case your example is missing a variety of vital pieces (e.g. manifest.json, webpack config that packs down to a single entry point). If you're indeed doing this and not hosting it somewhere else and just iframing it in - then I'd need to see the full application.
If you're hosting it somewhere else, and iframing it in (e.g. in your location field of your manifest file it says a web address and not an html file) then even though react is client side, to ZAF it's considered server side as it's being hosted somewhere else. In these circumstances you'd need to follow the steps in the link above.
-
Hi Eric,
We do not have any manifest file mentioning location. What we are doing currently is we are build a react application locally. So, let's say the application is running on http://localhost:3000/.
Then we update that URL in Zendesk marketplace for an application.
In this case will ZAF consider it as server-side application?
-
Hey Balaji,
Yes - if the application isn't being zipped and installed locally to Zendesk and is instead hosted at an external address (whether it be your local or an actual host), we'd consider it server side.
-
Hi Eric,
If we pass app_guid while redirecting it is working fine now for the first time both before and after login. But when I logout and try to login again I am not getting app_guid again.
Suppose there is a home component. so, when I login first time I get app_guid from search there but when I logout and login again I do not get app_guid from search in the same component.
-
Hey Balaji,
A couple of things:
When you're saying "logout/login" are referring to logging out/in of Zendesk or your application?
What is the app that you're putting the "localhost" url into in your screenshot? Can you provide me a link to it in the marketplace? Is there a reason you aren't just installing it as your own server side application (related docs)? We can't really debug if you're not using ZAF directly.
-
Hi Eric,
By "logout/login" I am referring to logging out/in from our application and not Zendesk.
The screenshot I put up there is a simple react application running in local.
We have not deployed the app anywhere (like aws) yet as development is not complete, so using running it in local and using it there in Zendesk.
We are not using manifest.json file. Is it mandatory?
I will go through the document you shared.
-
Hey Balaji,
This screenshot is of the settings of an app being installed in Zendesk. Based on what you've told me this isn't your react app. What is this app called? Did you install it from the marketplace?
-
Hi Eric,
The screenshot given below if showing localhost URL for the application running on my local. This was the dummy application we created without login and logout functionality.
We did not install this app from marketplace. We are referring to app URL running on my local.
-
The application I am running in my local now is our actual application which has login and logout functionality. Where first time I get app_guid automatically in URL but when I do logout and login the I do not get app_guid.
If I store old app_guid and use it, then also it is not working.
When I reload whole Zendesk application again then it gets started working again.
-
Hi Eric,
Will it be possible to setup a call? So that I can explain it in better way.
-
Hey Balaji,
Unfortunately, I'm not available for a call. I'd suggest opening up a support ticket so that we can review your actual application's code and provide feedback on your ZAF implementation.
Please sign in to leave a comment.
18 Comments