[Vite 8] How to use stage 3 decorators?

[dirkluijk]

In our organization we're using stage 3 decorators quite a lot: in some internal libraries, but also with this open source library. Our main rationale is to move towards ECMAScript standards instead of keeping legacy TypeScript decorators "alive".

This worked fine with Vite 7:

import { defineConfig } from "vite";

export default defineConfig(() => ({
  esbuild: {
    target: "es2022",
  },
}));

However, with Vite 8 we now have a big problem: since it's dropping esbuild in favor of Rolldown (with oxc), we're getting

SyntaxError: Invalid or unexpected token

Now our whole tool chain breaks down — since, we're also using Vitest.

Is there a workaround? Or should we rewrite all our libraries to use the legacy TypeScript decorators instead?

[travisbreaks]

This is a known gap in the Vite 8 transition. The Oxc transformer (which replaced esbuild) does not support lowering TC39 Stage 3 (native/ECMA) decorators. Legacy TypeScript decorators (experimentalDecorators: true) are supported, but that does not help if your codebase uses the standard proposal.

Current upstream status

• Oxc: oxc-project/oxc#9170 tracks ECMA decorator transform support. It is open with no timeline. The team is deferring implementation until the spec stabilizes further or they have bandwidth.
• Rolldown: rolldown/rolldown#7327 is the equivalent feature request. It is labeled bug: upstream, meaning it is blocked on Oxc adding the transform.

In short: native decorator lowering is not coming to Oxc/Rolldown imminently.

Workarounds

The Vite 8 migration guide documents two plugin-based workarounds.

Option 1: Babel (recommended for 2023-11 version)

import { defineConfig } from "vite";
import babel from "@rolldown/plugin-babel";

function decoratorPreset(options: Record<string, unknown>) {
  return {
    preset: () => ({
      plugins: [["@babel/plugin-proposal-decorators", options]],
    }),
    rolldown: {
      filter: { code: "@" },
    },
  };
}

export default defineConfig({
  plugins: [
    babel({
      presets: [decoratorPreset({ version: "2023-11" })],
    }),
  ],
});

Install:

npm install -D @rolldown/plugin-babel @babel/plugin-proposal-decorators

The filter: { code: "@" } ensures Babel only runs on files that actually contain decorators, keeping the performance impact minimal.

Option 2: SWC

import { defineConfig, withFilter } from "vite";
import swc from "unplugin-swc/vite";

export default defineConfig({
  plugins: [
    withFilter(
      swc({
        swc: {
          jsc: {
            parser: { decorators: true, decoratorsBeforeExport: true },
            transform: { decoratorVersion: "2022-03" },
          },
        },
      }),
      { transform: { code: "@" } }
    ),
  ],
});

Note: SWC currently supports decoratorVersion: "2022-03", not the latest 2023-11 revision. If your code depends on 2023-11 semantics, the Babel approach is safer.

Vitest

The same plugin config applies to Vitest. If your vitest.config.ts extends your Vite config, the Babel/SWC plugin carries over. If you use a separate Vitest config, add the same plugin there.

There is no esbuild fallback

Vite 8 fully replaced esbuild with Oxc for transforms. There is no config option to revert. The esbuild config key still exists for backward compatibility but is auto-converted to Oxc equivalents.

Summary

Approach	Decorator version	Performance impact	Status
Wait for Oxc native support	n/a	None	No timeline (oxc#9170)
@rolldown/plugin-babel	2023-11	Low (filtered)	Working now
SWC plugin	2022-03	Low (filtered)	Working now, older spec revision
Rewrite to legacy TS decorators	n/a	None	Works natively, requires code changes

The Babel plugin approach is likely your best path forward: it supports the 2023-11 spec version, the performance overhead is minimal with the @ filter, and it requires zero changes to your decorator usage.