Как сделать так чтобы я мог использовать декораторы в проекте с Vite React MobX Typescript SWC?

Question

[alaskafx]

Есть такое хранилище:

import {observable, makeAutoObservable} from 'mobx';

class Store {
    @observable count = 0;

    constructor() {
        makeAutoObservable(this)
    }
}

const store = new Store();
export default store;

И сам компонент:

import {useEffect} from 'react'
import './App.css'
import {observer} from "mobx-react-lite";
import store from './store'

const App =  observer(() => {

    useEffect(()=> {
        console.log(store.count)
    }, [])
  return (
    <div className="App">
      
    </div>
  )
})

export default App

В настройках ТС я выставил "experimentalDecorators": true, а так же в конфигурации вайта:

/// <reference types="vite/client" />
import { defineConfig } from 'vite';
import ts from 'vite-ts-compiler';
import { swcLoader } from '@next-js/swc-loader';
import swc from 'vite-plugin-swc';
export default defineConfig({
    plugins: [ts(), swcLoader(),
        swc({
            jsc: {
                target: 'esnext',
                parser: {
                    syntax: 'typescript',
                    decorators: true,
                    tsx: true,
                },
                transform: {
                    legacyDecorator: true,
                    decoratorMetadata: true,
                },
            },
        })],
});

Однако оно всё равно ругается на декораторы и не хочет работать с ними(
Как я могу это исправить и заставить работать? Почему так?

Answer 1

[suraid0]

Столкнулся с такой же проблемой, декораторы работают с таким vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      tsDecorators: true,
    }),
  ],
})

В настройках плагина реакта нужно включить tsDecorators