Registry / observability / vite-plugin-posthog

vite-plugin-posthog

library2.1.0jsnpmunverified

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.

observability

npm install vite-plugin-posthog

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-POSTHO

vite-plugin-posthog

observabilityjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

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

VitePluginPosthog

✓ import VitePluginPosthog from 'vite-plugin-posthog'

✗ const VitePluginPosthog = require('vite-plugin-posthog').default;

Default export; CommonJS require would need .default but ESM is preferred.

usePostHog

✓ import { usePostHog } from 'vite-plugin-posthog'

✗ import usePostHog from 'vite-plugin-posthog';

Named export for React hook; default import will not work.

PostHogProvider

✓ import { PostHogProvider } from 'vite-plugin-posthog'

Named export for React context provider.

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.

// vite.config.ts import { defineConfig } from 'vite'; import VitePluginPosthog from 'vite-plugin-posthog'; export default defineConfig({ plugins: [ VitePluginPosthog({ apiKey: process.env.VITE_POSTHOG_API_KEY ?? '', options: { host: 'https://app.posthog.com', }, }), ], }); // React component example import { usePostHog } from 'vite-plugin-posthog'; function TrackButton() { const posthog = usePostHog(); return <button onClick={() => posthog?.capture('button_clicked')}>Track</button>; }

Debug

Known issues

breakingVersion 2.0.0 changed import path for React types; require('vite-plugin-posthog/react') no longer valid.

fix

Use default import VitePluginPosthog from 'vite-plugin-posthog' and named exports for hooks.

affects: >=2.0.0

deprecatedUsing 'posthog-js' directly alongside this plugin may cause double initialization.

fix

Rely solely on the plugin to initialize PostHog; avoid manual posthog.init() in application code.

affects: all

gotchaReact hooks like usePostHog require PostHogProvider to be rendered in the component tree; otherwise returns undefined.

fix

Wrap your app with <PostHogProvider> imported from 'vite-plugin-posthog'.

affects: all

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'capture')

usePostHog() returns undefined when PostHogProvider is missing or plugin not configured.

fix

Ensure <PostHogProvider> wraps the component tree and vite-plugin-posthog is configured in vite.config.ts.

Module not found: Can't resolve 'vite-plugin-posthog'

Package not installed or import path is wrong.

fix

Run 'npm install vite-plugin-posthog' and verify import statement: import VitePluginPosthog from 'vite-plugin-posthog'.

PostHog is already initialized. Overwriting.

Manual posthog.init() called in app code in addition to plugin initialization.

fix

Remove any manual posthog.init() calls; the plugin handles initialization.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

reactoptionalRequired for React-specific hooks and components; alternatives may require peer dependency.

@types/reactoptionalRequired for TypeScript support with React hooks/components.

Agent activity

33 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/RockiRider/vite-plugin-posthog ↗

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

homepagehttps://vite-posthog.tsotne.co.uk ↗