Cannot use clarity-js `start` or other methods

[tmchow]

When trying to use the NPM module clarity-js then importing it into a NextJS project for example:

import clarity from 'clarity-js';

You cannot use any methods like start(). It results in an error:

Property 'start' does not exist on type 'typeof import("clarity-js")'

From the source code on GitHub, the library exports the clarity, version, and helper objects but there is no default export of a clarity object with a start method. The build process is using Rollup, but it's not clear if it's properly generating the .d.ts file from the TypeScript source. This looks like a package build issue leading to invalid TypeScript types.

[211211]

I'm using clarity-js 0.7.8. Since there is no default export in index.d.ts (typescript) so you need to import it's module like this:

import { clarity } from 'clarity-js'

and use as following:

clarity.start({
	projectId: id,
	upload: 'https://m.clarity.ms/collect',
	track: true,
	content: true,
})	

[z0nekill]

If you're interested in how the above configuration is derived, when you look at the tag Installation Methods > Install Manually provided by the clarity dashboard - you can see it calling https://www.clarity.ms/tag/<your_project_id>. This looks like a clarity-js configuration server.

If you hit that url directly you'll receive back some more JavaScript - but this time it'll have a preconfigured clarity configuration:

!(function (c, l, a, r, i, t, y) {
   ... blah, blah, blah
})("clarity", document, window, "script", {
  projectId: "<your_project_id>",
  upload: "https://z.clarity.ms/collect", // <- you could reverse proxy this through your own domain
  expire: 365,
  cookies: ["_uetmsclkid", "_uetvid"],
  track: true,
  lean: false,
  content: true,
  report: "https://www.clarity.ms/report-err/eus2b",
  dob: 1587,
  delayDom: false,
});

Better living everyone, the lack of documentation is something to be desired - but this is the default configuration that MS runs on most installations.

[dinbtechit]

I'm using clarity-js 0.7.8. Since there is no default export in index.d.ts (typescript) so you need to import it's module like this:

import { clarity } from 'clarity-js'

and use as following:

clarity.start({
	projectId: id,
	upload: 'https://m.clarity.ms/collect',
	track: true,
	content: true,
})	

I tried that but getting the following error when I built my angular project. Any idea how to resolve the types?

Error: node_modules/clarity-js/types/data.d.ts:1:22 - error TS2307: Cannot find module '@clarity-types/core' or its corresponding type declarations.

1 import { Time } from "@clarity-types/core";
                       ~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/clarity-js/types/data.d.ts:206:22 - error TS2474: const enum member initializers can only contain literal values and other computed enum values.

206     SessionTimeout = 30 * Time.Minute, // 30 minutes
                         ~~~~~~~~~~~~~~~~


Error: node_modules/clarity-js/types/data.d.ts:208:20 - error TS2474: const enum member initializers can only contain literal values and other computed enum values.

208     PingInterval = 1 * Time.Minute, // 1 Minute
                       ~~~~~~~~~~~~~~~


Error: node_modules/clarity-js/types/data.d.ts:209:19 - error TS2474: const enum member initializers can only contain literal values and other computed enum values.

209     PingTimeout = 5 * Time.Minute, // 5 Minutes
                      ~~~~~~~~~~~~~~~


Error: node_modules/clarity-js/types/data.d.ts:214:21 - error TS2474: const enum member initializers can only contain literal values and other computed enum values.

214     ShutdownLimit = 2 * Time.Hour, // Shutdown instrumentation after specified time
                        ~~~~~~~~~~~~~


Error: node_modules/clarity-js/types/data.d.ts:232:22 - error TS2474: const enum member initializers can only contain literal values and other computed enum values.

232     MaxUploadDelay = 30 * Time.Second, // Do flush out payload once every 30s,
                         ~~~~~~~~~~~~~~~~


Error: node_modules/clarity-js/types/layout.d.ts:1:25 - error TS2307: Cannot find module '@clarity-types/core' or its corresponding type declarations.

1 import { Privacy } from "@clarity-types/core";
                          ~~~~~~~~~~~~~~~~~~~~~