Vite support for decorators

Question

My code has some .js and .jsx files that use Mobx decorators. I tried adding the babel plugin, but it seems that it's being ignored.

My vite config is

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
const path = require('path')

export default defineConfig({
  resolve: {
    alias:{
      '@' : path.resolve(__dirname, './src')
    }
  },
  plugins: [react(
    {
      babel: {
        plugins: [['@babel/plugin-proposal-decorators', { legacy: true }], ['@babel/plugin-proposal-class-properties', { loose: true }], ['babel-plugin-add-react-displayname']]
      }
    }
  )]
})

But I receive the following errors:

Build failed with 11 errors:
src/api/support/adminTokenStore.js:5:2: ERROR: Expected identifier but found "@"
src/components/OldAdmin/OldAdmin.jsx:33:0: ERROR: Unexpected "@"
src/components/Pagination/Pagination.jsx:6:0: ERROR: Unexpected "@"
src/components/Textarea/Textarea.jsx:9:0: ERROR: Unexpected "@"
src/old-admin/invoices/invoice.jsx:44:0: ERROR: Unexpected "@"
...

Also tried with:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
const path = require('path')

export default defineConfig({
  resolve: {
    alias:{
      '@' : path.resolve(__dirname, './src')
    }
  },
  plugins: [react(
    {
      babel: {
        parserOpts: {
          plugins: [['decorators', {decoratorsBeforeExport: true}], 'decoratorAutoAccessors']
        }
      }
    }
  )]
})

Renaming them to .ts or .tsx is not an option. How should I fix this?

I'm running vite 2.9.9 and @vitejs/plugin-react 1.3.2