Vite TypeScript Decorators Plugin

1.1.0 verified Mon Apr 27 auth: no javascript

A Vite plugin (v1.1.0, actively maintained) that enables TypeScript decorator transformation in Vite projects, leveraging esbuild-decorators under the hood. It offers zero-config setup with optional customization via tsconfig path, workspace root, force flag, and source directory. Unlike manual Babel or tsc setups, this integrates directly into Vite's build pipeline, preserving fast HMR. Ships TypeScript types and requires reflect-metadata polyfill and Vite ^6.2.0.

Common errors

error Error: The plugin 'vite-ts-decorators' requires 'reflect-metadata' to be imported. ↓

cause Missing import of reflect-metadata in the project entry point

fix

Add import 'reflect-metadata' at the top of your main file or in vite.config.ts before using the plugin.

error TypeError: tsDecorators is not a function ↓

cause Incorrect import using named import instead of default import

fix

Change import { tsDecorators } from 'vite-ts-decorators' to import tsDecorators from 'vite-ts-decorators'

error Cannot find module 'vite-ts-decorators' or its corresponding type declarations. ↓

cause Package not installed or TypeScript cannot locate its type definitions

fix

Run pnpm add vite-ts-decorators and ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler'

Warnings

deprecated reflect-metadata is required and must be imported at the entry point of your application to enable decorator metadata ↓

fix Add import 'reflect-metadata' at the top of your main entry file or in vite.config.ts before plugin usage.

breaking Plugin requires Vite >= 6.2.0; using older versions will cause plugin loading errors ↓

fix Update Vite to version 6.2.0 or later via pnpm add vite@^6.2.0

gotcha Decorators are still an experimental TypeScript feature; ensure 'experimentalDecorators' is enabled in tsconfig.json ↓

fix Add 'experimentalDecorators': true and 'emitDecoratorMetadata': true (if needed) to your tsconfig.json compilerOptions

gotcha The plugin uses esbuild-decorators for transformation, which may not support all advanced decorator patterns (e.g., property decorators with metadata) ↓

fix Test your decorators thoroughly; consider using Babel or tsc if issues arise

Install

npm install vite-ts-decorators

yarn add vite-ts-decorators

pnpm add vite-ts-decorators

Imports

default (tsDecorators)
wrong
```
import { tsDecorators } from 'vite-ts-decorators'
```
correct
```
import tsDecorators from 'vite-ts-decorators'
```
The package exports a default function; named import will result in undefined.

ViteDecoratorsOptions

wrong

import { ViteDecoratorsOptions } from 'vite-ts-decorators'

correct

import type { ViteDecoratorsOptions } from 'vite-ts-decorators'

ViteDecoratorsOptions is a TypeScript interface only; use type import to avoid runtime errors.

tsDecorators (require)

wrong

const tsDecorators = require('vite-ts-decorators')

correct

const tsDecorators = require('vite-ts-decorators').default

In CommonJS, the default export is accessed via .default

Quickstart

Shows how to configure the plugin in vite.config.ts with optional options, import reflect-metadata, and use a decorator in a TypeScript class.

// vite.config.ts
import { defineConfig } from 'vite';
import tsDecorators from 'vite-ts-decorators';
import 'reflect-metadata';

export default defineConfig({
  plugins: [
    tsDecorators({
      tsconfig: './tsconfig.json',
      srcDir: './src'
    })
  ]
});

// src/example.ts
function log(target: any, key: string) {
  console.log(`Called ${key}`);
}

class MyClass {
  @log
  myMethod() {
    return 42;
  }
}

const instance = new MyClass();
instance.myMethod(); // Logs: Called myMethod