Unable to make it work in Ionic (Capacitor)

[varosengineer]

I followed the usage instructions given in https://www.npmjs.com/package/cordova-clarity, although I don't know if I did it correctly because it doesn't specify where the code snippet should be placed. In my case I put the code in the src/main.ts file of the application:

const success = (message: string) => {};
const failure = (message: string) => {};

// eslint-disable-next-line @typescript-eslint/naming-convention
declare let ClarityPlugin: any;
ClarityPlugin.initialize("<ProjectId>", success, failure, true);

However, I get the following error:

Uncaught ReferenceError: ClarityPlugin is not defined
    at 200 (main.ts:23:15)
    at r (bootstrap:19:1)
    at f (|groupOptions: {}|namespace object:210:1)
    at |groupOptions: {}|namespace object:210:1
    at r.O (chunk loaded:23:1)
    at |groupOptions: {}|namespace object:210:1
    at n (jsonp chunk loading:71:1)
    at main.js:1:49

Can someone help me set it up?

[ibradwan]

Hello @varosengineer,

Are you using Ionic with Capacitor? Did you get any errors while adding the plugins?

[varosengineer]

Hello @varosengineer,

Are you using Ionic with Capacitor? Did you get any errors while adding the plugins?

Sorry, @ibradwan, I didn't mention it. Yes, my project is based on Ionic with Capacitor.

According to the documentation the following code has to be added somewhere unspecified (I guess it depends on the project):

declare let ClarityPlugin: any;
var success = function(message: string) {}
var failure = function(message: string) {}
ClarityPlugin.initialize("<ProjectId>", success, failure, true);

In my project I'm not clear where to add it, but in my previous post you have the details.

The error I get is Uncaught ReferenceError: ClarityPlugin is not defined, and causes the web version of the application to stop working.

Thank you in advance.

[maryamshal]

Hi @varosengineer, We are aware of this issue and are working on it. It is due to Cordova Plugins not being supported on the Web Platform for Ionic with Capacitor [Github Issue]. For the time being, you could limit the plugin scope to just Android (as it is the platform currently supported by Clarity for Apps).

if(Capacitor.getPlatform() === "android"){
  declare let ClarityPlugin: any;
  var success = function(message: string) {}
  var failure = function(message: string) {}
  ClarityPlugin.initialize("<ProjectId>", success, failure, true);
}

[askchrisn]

Was this ever resolved? I am still facing the same issue.....

[ibradwan]

@askchrisn Did you try the workaround suggested above?