[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]

Oxc (which replaced esbuild in Vite 8) does not support lowering TC39 Stage 3 decorators. Legacy TS decorators (experimentalDecorators: true) work, but native/ECMA decorators do not. The tracking issue is oxc#9170, open with no timeline. Rolldown's equivalent (rolldown#7327) is labeled bug: upstream, blocked on Oxc.

The workaround from the Vite 8 migration guide: use @rolldown/plugin-babel with @babel/plugin-proposal-decorators. The filter: { code: "@" } option ensures Babel only runs on files that contain decorators, keeping perf impact minimal.

import babel from "@rolldown/plugin-babel"

export default defineConfig({
  plugins: [
    babel({
      presets: [{
        preset: () => ({ plugins: [["@babel/plugin-proposal-decorators", { version: "2023-11" }]] }),
        rolldown: { filter: { code: "@" } },
      }],
    }),
  ],
})

SWC is also an option via unplugin-swc, but it only supports the older 2022-03 spec revision. Same plugin config applies to Vitest if you extend your Vite config. There is no esbuild fallback; the esbuild config key still exists but auto-converts to Oxc equivalents.

[chandrika1993]

We hit the same issue with Stage 3 decorators after upgrading to Vite 8.

Current workaround is @rolldown/plugin-babel with @babel/plugin-proposal-decorators using "2023-11":

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" })],
    }),
  ],
});

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

"2023-11" is currently the safest choice because it matches the latest Stage 3 decorators semantics.

[Kapelianovych]

None of the proposed solutions work when the class' name is used by the decorator: Babels strips names and SWC generates assignment to class' name property causing "TypeError: Attempted to assign to readonly property.".