{"id":22954,"library":"vite-ts-decorators","title":"Vite TypeScript Decorators Plugin","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/icai/vite-ts-decorators","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-ts-decorators","lang":"bash","label":"npm"},{"cmd":"yarn add vite-ts-decorators","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-ts-decorators","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required polyfill for decorator metadata reflection at runtime","package":"reflect-metadata","optional":false},{"reason":"Peer dependency; plugin is designed for Vite's plugin system (v6.2.0+)","package":"vite","optional":false}],"imports":[{"note":"The package exports a default function; named import will result in undefined.","wrong":"import { tsDecorators } from 'vite-ts-decorators'","symbol":"default (tsDecorators)","correct":"import tsDecorators from 'vite-ts-decorators'"},{"note":"ViteDecoratorsOptions is a TypeScript interface only; use type import to avoid runtime errors.","wrong":"import { ViteDecoratorsOptions } from 'vite-ts-decorators'","symbol":"ViteDecoratorsOptions","correct":"import type { ViteDecoratorsOptions } from 'vite-ts-decorators'"},{"note":"In CommonJS, the default export is accessed via .default","wrong":"const tsDecorators = require('vite-ts-decorators')","symbol":"tsDecorators (require)","correct":"const tsDecorators = require('vite-ts-decorators').default"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport tsDecorators from 'vite-ts-decorators';\nimport 'reflect-metadata';\n\nexport default defineConfig({\n  plugins: [\n    tsDecorators({\n      tsconfig: './tsconfig.json',\n      srcDir: './src'\n    })\n  ]\n});\n\n// src/example.ts\nfunction log(target: any, key: string) {\n  console.log(`Called ${key}`);\n}\n\nclass MyClass {\n  @log\n  myMethod() {\n    return 42;\n  }\n}\n\nconst instance = new MyClass();\ninstance.myMethod(); // Logs: Called myMethod","lang":"typescript","description":"Shows how to configure the plugin in vite.config.ts with optional options, import reflect-metadata, and use a decorator in a TypeScript class."},"warnings":[{"fix":"Add import 'reflect-metadata' at the top of your main entry file or in vite.config.ts before plugin usage.","message":"reflect-metadata is required and must be imported at the entry point of your application to enable decorator metadata","severity":"deprecated","affected_versions":"all"},{"fix":"Update Vite to version 6.2.0 or later via pnpm add vite@^6.2.0","message":"Plugin requires Vite >= 6.2.0; using older versions will cause plugin loading errors","severity":"breaking","affected_versions":"<6.2.0"},{"fix":"Add 'experimentalDecorators': true and 'emitDecoratorMetadata': true (if needed) to your tsconfig.json compilerOptions","message":"Decorators are still an experimental TypeScript feature; ensure 'experimentalDecorators' is enabled in tsconfig.json","severity":"gotcha","affected_versions":"all"},{"fix":"Test your decorators thoroughly; consider using Babel or tsc if issues arise","message":"The plugin uses esbuild-decorators for transformation, which may not support all advanced decorator patterns (e.g., property decorators with metadata)","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Add import 'reflect-metadata' at the top of your main file or in vite.config.ts before using the plugin.","cause":"Missing import of reflect-metadata in the project entry point","error":"Error: The plugin 'vite-ts-decorators' requires 'reflect-metadata' to be imported."},{"fix":"Change import { tsDecorators } from 'vite-ts-decorators' to import tsDecorators from 'vite-ts-decorators'","cause":"Incorrect import using named import instead of default import","error":"TypeError: tsDecorators is not a function"},{"fix":"Run pnpm add vite-ts-decorators and ensure tsconfig.json includes 'moduleResolution': 'node' or 'bundler'","cause":"Package not installed or TypeScript cannot locate its type definitions","error":"Cannot find module 'vite-ts-decorators' or its corresponding type declarations."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}