Babel Legacy Decorator Plugin

1.3.5 verified Sat Apr 25 auth: no javascript maintenance

A Babel 6 plugin that replicates the legacy decorator behavior from Babel 5, allowing migration to Babel 6 without dropping decorators. Version 1.3.5 is the latest stable release; no longer maintained. For Babel 7+, use @babel/plugin-proposal-decorators with legacy: true. Key difference: decorators evaluate top-to-bottom and execute bottom-to-top (spec-compliant), unlike Babel 5's reverse order. Also handles static property initializers differently.

Common errors

error Error: [BABEL] unknown: Decorators are not supported yet in 6.x. ↓

cause Using Babel 6 without proper plugin enabled or using Babel 7's syntax without the plugin.

fix

Install babel-plugin-transform-decorators-legacy and add it to .babelrc plugins.

error TypeError: Cannot read property 'value' of undefined ↓

cause Incorrect plugin ordering: transform-class-properties runs before transform-decorators-legacy.

fix

Reorder plugins so transform-decorators-legacy comes first.

error ReferenceError: [BABEL] unknown: Plugin/Preset files are not allowed to export objects, only functions. ↓

cause Using an outdated Babel 6 version or incorrect import path.

fix

Ensure babel-core version 6.x is installed and use the short plugin name 'transform-decorators-legacy'.

Warnings

breaking Babel 7+ users must use @babel/plugin-proposal-decorators with legacy: true; this plugin does not work with Babel 7. ↓

fix Replace with @babel/plugin-proposal-decorators and set legacy: true in Babel config.

gotcha Plugin ordering matters: transform-decorators-legacy must come before transform-class-properties. ↓

fix Place transform-decorators-legacy before transform-class-properties in the plugins array.

deprecated This plugin is not maintained for Babel 6 and will not receive updates; the decorator proposal has evolved. ↓

fix Migrate to Babel 7 and use @babel/plugin-proposal-decorators with legacy: true or adopt the new decorator spec.

gotcha Decorator evaluation order differs from Babel 5: later decorators evaluate first (top-to-bottom), but execute in reverse (bottom-to-top). ↓

fix Adjust code that depends on evaluation order; this behavior matches the spec.

gotcha Static class property initializers are evaluated once and cached; initializer returns precomputed value, not re-executed on each access. ↓

fix Do not rely on initializer being called multiple times for side effects.

Install

npm install babel-plugin-transform-decorators-legacy

yarn add babel-plugin-transform-decorators-legacy

pnpm add babel-plugin-transform-decorators-legacy

Imports

plugin
wrong
```
plugins: ["babel-plugin-transform-decorators-legacy"]
```
correct
```
plugins: ["transform-decorators-legacy"]
```
In .babelrc or babel config, use the short plugin name without the 'babel-plugin-' prefix.
@babel/plugin-proposal-decorators (legacy)
wrong
```
plugins: ["@babel/plugin-proposal-decorators"]
```
correct
```
plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
```
For Babel 7+, use this official plugin with legacy: true to get the same behavior as transform-decorators-legacy.
require('babel-plugin-transform-decorators-legacy')
wrong
```
import plugin from 'babel-plugin-transform-decorators-legacy'
```
correct
```
const plugin = require('babel-plugin-transform-decorators-legacy')
```
This plugin is intended for Babel 6 which uses CommonJS. ESM imports are not supported in Babel 6 context.

Quickstart

Shows correct Babel config, plugin ordering, and a simple decorator usage for logging.

// .babelrc
{
  "plugins": ["transform-decorators-legacy"]
}

// Ensure order: decorators before class properties
// Correct:
{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

// Example usage
function log(target, name, descriptor) {
  const original = descriptor.value;
  descriptor.value = function(...args) {
    console.log(`Calling ${name} with`, args);
    return original.apply(this, args);
  };
  return descriptor;
}

class Example {
  @log
  greet(name) {
    return `Hello, ${name}`;
  }
}

const ex = new Example();
ex.greet('World'); // logs: Calling greet with ['World']