ViteBridge

1.1.5 verified Mon Apr 27 auth: no javascript

A Vite plugin that bridges React applications with Kulp.AI, providing error reporting, route tracking, component tagging, and postMessage-based communication. Current stable version is 1.1.5, with no established release cadence. Key differentiators: development-only operation, configurable bridges, TypeScript support, and dependency on @babel/parser, magic-string, and estree-walker for component tagging. Alternatives include custom Vite plugins for similar features, but vite-bridge offers a unified integration with Kulp.AI.

Common errors

error Cannot find module '@babel/parser' or its corresponding type declarations. ↓

cause Missing required dependency for component tagger.

fix

npm install @babel/parser

error TypeError: viteBridge is not a function ↓

cause Incorrect import or spread missing.

fix

Ensure you use 'import { viteBridge } from 'vite-bridge'' and spread the result: '...viteBridge()'

error Attempted import error: 'viteBridge' is not exported from 'vite-bridge'. ↓

cause Using default import instead of named import.

fix

Change to 'import { viteBridge } from 'vite-bridge''

Warnings

gotcha Note: viteBridge() returns an array of plugins, so you need to spread the result with '...viteBridge()'. ↓

fix Use ...viteBridge() instead of viteBridge() as a single plugin.

gotcha Component tagger requires additional dependencies: @babel/parser, magic-string, and estree-walker. If missing, the feature is silently disabled. ↓

fix Install the required dependencies: npm install @babel/parser magic-string estree-walker

gotcha Tailwind CSS configuration generation requires esbuild and tailwindcss to be installed separately. ↓

fix Install optional dependencies: npm install esbuild tailwindcss

deprecated No known deprecations in v1.1.5. ↓

fix N/A

Install

npm install vite-bridge

yarn add vite-bridge

pnpm add vite-bridge

Imports

viteBridge

wrong

import viteBridge from 'vite-bridge'

correct

import { viteBridge } from 'vite-bridge'

viteBridge is a named export, not a default export.

ViteBridgeOptions

wrong

import { ViteBridgeOptions } from 'vite-bridge'

correct

import type { ViteBridgeOptions } from 'vite-bridge'

Type imports should use the type keyword for TypeScript.

BuildError

wrong

import { BuildError } from 'vite-bridge'

correct

import type { BuildError } from 'vite-bridge'

BuildError is a TypeScript interface, not a runtime value.

Quickstart

Shows basic setup of vite-bridge plugin in Vite configuration with all bridges enabled.

import { defineConfig } from 'vite';
import { viteBridge } from 'vite-bridge';

export default defineConfig({
  plugins: [
    ...viteBridge(),
  ],
});