@babel/plugin-proposal-decorators not working in dev mode

[drthoben]

Describe the bug

When running vite in development mode, @babel/plugin-proposal-decorators is not properly applied and any decorator causes an unexpected symbol error.

Reproduction

https://github.com/drthoben/vite-decorators-problem

Steps to reproduce

Run yarn to install dependencies.

Then run yarn build. The build command is running as expected.
Running yarn dev results in the following error:

✘ [ERROR] Unexpected "@"

    src/Root.jsx:17:0:
      17 │ @decorated
         ╵ ^

Build failed with 1 error:
src/Root.jsx:17:0: ERROR: Unexpected "@"

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1
    Memory: 3.41 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Safari: 15.6.1
  npmPackages:
    @vitejs/plugin-react: ^3.0.0 => 3.0.0 
    vite: ^4.0.1 => 4.0.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ArnaudBarre]

This is because esbuild is use for dependency pre-bundling and doesn't support decorators for non TS files: evanw/esbuild#104 (comment) (and that's fine, that's still a proposal).

You can get around it with this config:

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

export default defineConfig({
  optimizeDeps: { esbuildOptions: { loader: { ".jsx": "tsx" } } },
  plugins: [react({ babel: { plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]] } })],
});