{"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,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","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,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}