Registry / observability / vite-plugin-ms-clarity

vite-plugin-ms-clarity

library1.0.0jsnpmunverified

Vite plugin for integrating Microsoft Clarity analytics. Current stable version is 1.0.0. This plugin simplifies adding Clarity tracking to any Vite project (compatible with Vite ^4 || ^5). It ships TypeScript types and is lightweight with no additional runtime dependencies. Unlike manual injection, this plugin handles environment variables, script loading, and type-safe options.

observability web-framework

npm install vite-plugin-ms-clarity

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-MS-CLA

vite-plugin-ms-clarity

observabilityjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginMsClarity

✓ import vitePluginMsClarity from 'vite-plugin-ms-clarity'

✗ const vitePluginMsClarity = require('vite-plugin-ms-clarity')

Package provides a default export. ESM-only; CJS require is not supported.

MsClarityOptions

✓ import type { MsClarityOptions } from 'vite-plugin-ms-clarity'

✗ import { MsClarityOptions } from 'vite-plugin-ms-clarity'

Type-only import to avoid runtime side effects. MsClarityOptions is not a runtime value.

MsClarityPlugin

✓ import { MsClarityPlugin } from 'vite-plugin-ms-clarity'

✗ import MsClarityPlugin from 'vite-plugin-ms-clarity'

Named export for the plugin class is available, but the default export is the plugin function. Use named import only if you need the class type.

Shows how to integrate the plugin with Vite using environment variable for the Clarity ID.

// vite.config.ts import { defineConfig } from 'vite'; import vitePluginMsClarity from 'vite-plugin-ms-clarity'; export default defineConfig({ plugins: [ vitePluginMsClarity({ id: process.env.VITE_CLARITY_ID ?? '', enable: true }) ] });

Debug

Known issues

gotchaThe plugin does not validate the Clarity ID format. An invalid or empty ID will cause a runtime error in the browser.

fix

Ensure the environment variable VITE_CLARITY_ID is set and valid before building.

affects: >=1.0.0

breakingOnly supports Vite ^4 || ^5. Will not work with Vite 3 or earlier.

fix

Upgrade Vite to version 4 or 5.

affects: >=1.0.0

deprecatedThe Options type may change in future minor versions as stricter validation is added.

fix

Review the Options interface after each update and fix any type errors.

affects: >=1.0.0

Errors

Common errors & fixes

Cannot find module 'vite-plugin-ms-clarity' or its corresponding type declarations.

Package not installed or type resolution not configured.

fix

Run npm install vite-plugin-ms-clarity --save-dev and ensure tsconfig.json has compilerOptions.types or includes node_modules.

ViteError: No known conditions for './dist/index.mjs' specifier for 'vite-plugin-ms-clarity'

Old Vite version or incorrect module resolution.

fix

Upgrade Vite to ^4 || ^5 and clear node_modules/.vite cache (rm -rf node_modules/.vite).

Uncaught TypeError: Cannot read properties of undefined (reading 'push')

Clarity ID is empty or undefined when plugin is enabled.

fix

Set the environment variable VITE_CLARITY_ID to a valid Clarity project ID.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

35 hits · last 30 days

node

Bingbot

OpenAI (training)

Resources

githubhttps://github.com/KermanX/vite-plugin-ms-clarity ↗

packagehttps://www.npmjs.com/package/vite-plugin-ms-clarity ↗