{"id":22779,"library":"vite-plugin-posthog","title":"vite-plugin-posthog","description":"A Vite plugin that simplifies integrating PostHog analytics into Vite-based applications. Current stable version is 2.1.0 (July 2024). Provides automatic injection of the PostHog snippet, environment-aware configuration, and optional React hooks/components. Released under MIT license with active maintenance (several releases in 2024). Differentiates from direct PostHog usage by handling Vite-specific optimizations (e.g., tree-shaking, environment variables). Peer dependencies include React (>=16.8) for optional React support.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/RockiRider/vite-plugin-posthog","tags":["javascript","vite","posthog","analytics","plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-posthog","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-posthog","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-posthog","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for React-specific hooks and components; alternatives may require peer dependency.","package":"react","optional":true},{"reason":"Required for TypeScript support with React hooks/components.","package":"@types/react","optional":true}],"imports":[{"note":"Default export; CommonJS require would need .default but ESM is preferred.","wrong":"const VitePluginPosthog = require('vite-plugin-posthog').default;","symbol":"VitePluginPosthog","correct":"import VitePluginPosthog from 'vite-plugin-posthog'"},{"note":"Named export for React hook; default import will not work.","wrong":"import usePostHog from 'vite-plugin-posthog';","symbol":"usePostHog","correct":"import { usePostHog } from 'vite-plugin-posthog'"},{"note":"Named export for React context provider.","wrong":"","symbol":"PostHogProvider","correct":"import { PostHogProvider } from 'vite-plugin-posthog'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport VitePluginPosthog from 'vite-plugin-posthog';\n\nexport default defineConfig({\n  plugins: [\n    VitePluginPosthog({\n      apiKey: process.env.VITE_POSTHOG_API_KEY ?? '',\n      options: {\n        host: 'https://app.posthog.com',\n      },\n    }),\n  ],\n});\n\n// React component example\nimport { usePostHog } from 'vite-plugin-posthog';\n\nfunction TrackButton() {\n  const posthog = usePostHog();\n  return <button onClick={() => posthog?.capture('button_clicked')}>Track</button>;\n}","lang":"typescript","description":"Shows how to configure the plugin in vite.config.ts with an API key from environment variable, and how to use the usePostHog React hook to capture events."},"warnings":[{"fix":"Use default import VitePluginPosthog from 'vite-plugin-posthog' and named exports for hooks.","message":"Version 2.0.0 changed import path for React types; require('vite-plugin-posthog/react') no longer valid.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Rely solely on the plugin to initialize PostHog; avoid manual posthog.init() in application code.","message":"Using 'posthog-js' directly alongside this plugin may cause double initialization.","severity":"deprecated","affected_versions":"all"},{"fix":"Wrap your app with <PostHogProvider> imported from 'vite-plugin-posthog'.","message":"React hooks like usePostHog require PostHogProvider to be rendered in the component tree; otherwise returns undefined.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"search_vec":"'16.8':72 '2.1.0':22 '2024':24,50 'activ':45 'analyt':12,80 'applic':17 'automat':26 'awar':34 'base':16 'configur':35 'current':18 'depend':69 'differenti':51 'direct':53 'e.g':62 'environ':33,66 'environment-awar':32 'handl':57 'hooks/components':39 'includ':70 'inject':27 'integr':10 'javascript':77 'juli':23 'licens':43 'mainten':46 'mit':42 'optim':61 'option':37,74 'peer':68 'plugin':3,7,81 'posthog':4,11,30,54,79 'provid':25 'react':38,71,75 'releas':40,48 'sever':47 'shake':65 'simplifi':9 'snippet':31 'specif':60 'stabl':19 'support':76 'tree':64 'tree-shak':63 'typescript':82 'usag':55 'variabl':67 'version':20 'vite':2,6,15,59,78 'vite-bas':14 'vite-plugin-posthog':1 'vite-specif':58","created_at":"2026-04-27T17:06:58.127714+00:00","updated_at":"2026-04-27T17:06:58.127714+00:00","problems":[{"fix":"Ensure <PostHogProvider> wraps the component tree and vite-plugin-posthog is configured in vite.config.ts.","cause":"usePostHog() returns undefined when PostHogProvider is missing or plugin not configured.","error":"TypeError: Cannot read properties of undefined (reading 'capture')"},{"fix":"Run 'npm install vite-plugin-posthog' and verify import statement: import VitePluginPosthog from 'vite-plugin-posthog'.","cause":"Package not installed or import path is wrong.","error":"Module not found: Can't resolve 'vite-plugin-posthog'"},{"fix":"Remove any manual posthog.init() calls; the plugin handles initialization.","cause":"Manual posthog.init() called in app code in addition to plugin initialization.","error":"PostHog is already initialized. Overwriting."}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://vite-posthog.tsotne.co.uk","github":"https://github.com/RockiRider/vite-plugin-posthog","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-posthog","openapi_spec":null,"status_page":null,"smithery":null,"categories":["observability"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}