vite-plugin-radar

0.10.1 verified Mon Apr 27 auth: no javascript

Vite plugin to inject analytics scripts (Google Analytics, Google Tag Manager, Facebook Pixel, LinkedIn Insight, Yandex Metrica, Baidu Tongji, Microsoft Clarity, PostHog, Plausible, TikTok Pixel, Unbounce, and more) into Vite builds. Current stable version 0.10.1, released January 2025. Supports Vite 2–7 with TypeScript types. Key differentiators: multi-provider support, injection control per environment, custom GTM source, and consent mode configuration. Active development with frequent updates.

Common errors

error TypeError: VitePluginRadar is not a function ↓

cause Using deprecated default import after v0.10.0.

fix

Change to named import: import { VitePluginRadar } from 'vite-plugin-radar'.

error Cannot find module 'vite-plugin-radar' or its corresponding type declarations. ↓

cause Package not installed or TypeScript cannot resolve types.

fix

Run 'npm install --save-dev vite-plugin-radar' and ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler'.

error vite-plugin-radar: Script not injected in development. ↓

cause By default scripts are disabled in dev mode.

fix

Add enableDev: true to plugin options: VitePluginRadar({ enableDev: true, ... })

error Uncaught SyntaxError: Unexpected token '<' ↓

cause Malformed injection due to wrong GTM environment or GTM source URL.

fix

Ensure gtmBase and nsBase are valid HTTPS URLs, and environment.auth and environment.preview are correct.

Warnings

breaking Default export removed in v0.10.0: use named import { VitePluginRadar } instead. ↓

fix Change 'import VitePluginRadar from "vite-plugin-radar"' to 'import { VitePluginRadar } from "vite-plugin-radar"'.

gotcha Scripts are not injected in development mode by default. Use enableDev: true to enable. ↓

fix Add enableDev: true to the plugin options.

gotcha Some analytics providers may have CSP (Content Security Policy) issues if scripts are injected dynamically. ↓

fix Add 'https://www.googletagmanager.com' and other provider domains to your Content-Security-Policy script-src directive.

deprecated UA-XXXXX (Universal Analytics) identifiers are deprecated and may stop working soon. ↓

fix Upgrade to G-XXXXX (Google Analytics 4) measurement IDs.

gotcha Yandex Metrica base link changed in v0.10.1; older versions may use outdated URL. ↓

fix Update to v0.10.1 or later: 'npm install vite-plugin-radar@latest'.

gotcha Multiple instances of the same provider (e.g., two analytics IDs) must be passed as an array. ↓

fix Use analytics: [{ id: 'G-XXXXX' }, { id: 'G-YYYYY' }].

Install

npm install vite-plugin-radar

yarn add vite-plugin-radar

pnpm add vite-plugin-radar

Imports

VitePluginRadar
wrong
```
import VitePluginRadar from 'vite-plugin-radar'
```
correct
```
import { VitePluginRadar } from 'vite-plugin-radar'
```
Since v0.10.0, only named export is available. Default export was removed (breaking change).

VitePluginRadar

wrong

import VitePluginRadar from 'vite-plugin-radar'

correct

const { VitePluginRadar } = require('vite-plugin-radar')

Works with CommonJS via require, but the package is ESM-first. Use named import.

type VitePluginRadarOptions

wrong

import VitePluginRadar from 'vite-plugin-radar';
const options: VitePluginRadar.Options = {}

correct

import { VitePluginRadar } from 'vite-plugin-radar';
const options: VitePluginRadarOptions = { analytics: { id: 'G-XXXXX' } }

Types are exported as part of the module; no separate type import path needed. Options type is inferred from the plugin function parameter.

Quickstart

Shows how to configure VitePluginRadar with Google Analytics, Google Tag Manager (with environment) and Facebook Pixel using environment variables.

// vite.config.js
import { VitePluginRadar } from 'vite-plugin-radar';
export default {
  plugins: [
    VitePluginRadar({
      analytics: {
        id: process.env.GA_ID ?? 'G-XXXXX',
      },
      gtm: {
        id: process.env.GTM_ID ?? 'GTM-XXXXX',
        environment: {
          auth: process.env.GTM_AUTH ?? '',
          preview: process.env.GTM_PREVIEW ?? '',
        },
      },
      pixel: {
        id: process.env.PIXEL_ID ?? '0000000',
      },
    }),
  ],
};