{"id":27521,"library":"vite-plugin-ms-clarity","title":"vite-plugin-ms-clarity","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/KermanX/vite-plugin-ms-clarity","tags":["javascript","clarity","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-ms-clarity","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-ms-clarity","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-ms-clarity","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package provides a default export. ESM-only; CJS require is not supported.","wrong":"const vitePluginMsClarity = require('vite-plugin-ms-clarity')","symbol":"vitePluginMsClarity","correct":"import vitePluginMsClarity from 'vite-plugin-ms-clarity'"},{"note":"Type-only import to avoid runtime side effects. MsClarityOptions is not a runtime value.","wrong":"import { MsClarityOptions } from 'vite-plugin-ms-clarity'","symbol":"MsClarityOptions","correct":"import type { MsClarityOptions } from 'vite-plugin-ms-clarity'"},{"note":"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.","wrong":"import MsClarityPlugin from 'vite-plugin-ms-clarity'","symbol":"MsClarityPlugin","correct":"import { MsClarityPlugin } from 'vite-plugin-ms-clarity'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vitePluginMsClarity from 'vite-plugin-ms-clarity';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginMsClarity({\n      id: process.env.VITE_CLARITY_ID ?? '',\n      enable: true\n    })\n  ]\n});","lang":"typescript","description":"Shows how to integrate the plugin with Vite using environment variable for the Clarity ID."},"warnings":[{"fix":"Ensure the environment variable VITE_CLARITY_ID is set and valid before building.","message":"The plugin does not validate the Clarity ID format. An invalid or empty ID will cause a runtime error in the browser.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade Vite to version 4 or 5.","message":"Only supports Vite ^4 || ^5. Will not work with Vite 3 or earlier.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Review the Options interface after each update and fix any type errors.","message":"The Options type may change in future minor versions as stricter validation is added.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install vite-plugin-ms-clarity --save-dev and ensure tsconfig.json has compilerOptions.types or includes node_modules.","cause":"Package not installed or type resolution not configured.","error":"Cannot find module 'vite-plugin-ms-clarity' or its corresponding type declarations."},{"fix":"Upgrade Vite to ^4 || ^5 and clear node_modules/.vite cache (rm -rf node_modules/.vite).","cause":"Old Vite version or incorrect module resolution.","error":"ViteError: No known conditions for './dist/index.mjs' specifier for 'vite-plugin-ms-clarity'"},{"fix":"Set the environment variable VITE_CLARITY_ID to a valid Clarity project ID.","cause":"Clarity ID is empty or undefined when plugin is enabled.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'push')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}