Vite Plugin Watch and Run

1.8.0 verified Mon Apr 27 auth: no javascript

A Vite plugin (v1.8.0) that watches specified files and runs a package.json script when changes are detected. Built on top of chokidar, it supports glob patterns, debouncing, and console output customization. Part of the KitQL ecosystem, it is actively maintained with regular releases. Unlike using chokidar directly, it integrates seamlessly into the Vite dev server lifecycle.

Common errors

error Error: The plugin `vite-plugin-watch-and-run` does not provide a default export ↓

cause Using `import { watchAndRun }` when the default export is needed.

fix

Use import watchAndRun from 'vite-plugin-watch-and-run' instead.

error Module not found: Can't resolve 'vite-plugin-watch-and-run' ↓

cause Missing dependency or incorrect installation.

fix

Run npm install vite-plugin-watch-and-run --save-dev and ensure Vite is installed.

error TypeError: watchAndRun is not a function ↓

cause Importing the named export incorrectly.

fix

Use default import: import watchAndRun from 'vite-plugin-watch-and-run'.

Warnings

breaking Glob pattern handling changed: v1.8.0 uses picomatch instead of micromatch and extracts base paths for chokidar. ↓

fix Review glob patterns. Any glob that relied on micromatch-specific features may need adjustment.

gotcha The `delay` option (ms) is applied per run; multiple changes within the delay may coalesce but not guaranteed. ↓

fix Set `delay` to a value high enough to coalesce rapid changes (e.g., 500).

deprecated Option `log_on_throw_is_not_a_new_class` was removed in vite-plugin-watch-and-run@1.8.0. ↓

fix Remove this option from your configuration; it is no longer supported.

gotcha The plugin runs the script in the project root; ensure the script is defined in package.json scripts. ↓

fix Verify the script exists in your package.json under `scripts`.

Install

npm install vite-plugin-watch-and-run

yarn add vite-plugin-watch-and-run

pnpm add vite-plugin-watch-and-run

Imports

default

wrong

const { watchAndRun } = require('vite-plugin-watch-and-run')

correct

import watchAndRun from 'vite-plugin-watch-and-run'

Default export; named import `WatchAndRun` also works but default is recommended.

WatchAndRun

wrong

import WatchAndRun from 'vite-plugin-watch-and-run'

correct

import { WatchAndRun } from 'vite-plugin-watch-and-run'

Named export available since v1.7.0.

Params (type)

import type { Params } from 'vite-plugin-watch-and-run'

TypeScript type export for configuration.

Quickstart

Watches CSS files for changes and runs the build:css script.

// vite.config.js
import { defineConfig } from 'vite';
import watchAndRun from 'vite-plugin-watch-and-run';

export default defineConfig({
  plugins: [
    watchAndRun([
      {
        watch: 'src/**/*.css',
        run: 'npm run build:css',
      },
    ]),
  ],
});