Stage 3 decorators throwing syntax error

[b3nten]

While Vite 5.3 updated esbuild to support stage 3 decorators, and SWC has supported it for a while, when I enable the react plugin it throws the following error (using mobx):

[plugin:vite:react-swc] × Unexpected token `@`. Expected identifier, string literal, numeric literal or [ for the computed key @observable

When I disable the plugin it works fine, but of course I don't have react refresh anymore. Here is my vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    react({
      devTarget: "es2022",
    })
  ],
  css: {
    transformer: "lightningcss"
  },
  esbuild: {
    target: "es2022"
  }
})```

[ArnaudBarre]

I've look into it and the support from SWC is not quite there (it can be added by using https://swc.rs/docs/configuration/compilation#jsctransformdecoratorversion), but it not as stable in SWC as in esbuild. I've updated the description of vitejs/vite-plugin-react#430 to reflect this and I'm closing this as duplicate.

For now you can either patch to opt-in to unstable 2022-03 or use the legacy one (both as declared supported by mobx) using tsDecorators option (requires using TS/TSX source code)