How to use the mobx decorator? ( react, framework7 v.6 )

Questions
1

I have also created the Babel.config.js file, but the same error occurs.

I want to develop using mobx.

But I got an error that the decorator cannot be referenced.

error: Expected identifier but found “@”

first,
node version : v14.17.6

install framework7




npm install -g framework7 framework7-react framework7-cli cordova

framework7.cmd create --ui

create framework7
​

RootStore.jsx

import { action, computed, observable } from "mobx";

import YTStore from "../../../YT/modules/store/YTStore";
import RootRepository from "../repository/RootRepository.jsx";


class RootStore {
    constructor() {
        this.YTStore = new YTStore(this);
    }

    getRootRepository = () => {
        return RootRepository;
    };

    @observable keepAlive;

    keepAlive = async () => {
        return await RootRepository.keepAlive();
    };

    initializeYTStore() {
        this.YTStore = new YTStore(this);
    }

    isInitializedYTStore() {
        let isInitialized = true;

        if (this.YTStore === null || this.YTStore === undefined) {
            isInitialized = false;
        }
        return isInitialized;
    }
}

export default new RootStore(); // Singleton class return

package.json

{
  "name": "reactvmt",
  "private": true,
  "version": "1.0.0",
  "description": "ReactVmt",
  "repository": "",
  "license": "UNLICENSED",
  "scripts": {
    "start": "npm run dev",
    "start_rewired": "react-app-rewired start",
    "dev": "cross-env NODE_ENV=development vite",
    "build": "cross-env NODE_ENV=production vite build",
    "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy ./node_modules/material-icons/iconfont/*.* ./src/fonts/"
  },
  "browserslist": [
    "Android >= 7",
    "IOS >= 11",
    "Safari >= 11",
    "Chrome >= 49",
    "Firefox >= 31",
    "Samsung >= 5"
  ],
  "dependencies": {
    "axios": "^0.24.0",
    "core-decorators": "^0.20.0",
    "dom7": "^3.0.0",
    "framework7": "^6.3.5",
    "framework7-icons": "^5.0.3",
    "framework7-react": "^6.3.5",
    "material-icons": "^1.8.1",
    "mobx": "^5.15.7",
    "mobx-react": "^6.2.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "skeleton-elements": "^3.5.0",
    "swiper": "^6.8.4"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.16.4",
    "@vitejs/plugin-react": "^1.1.0",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "babel-preset-mobx": "^2.0.0",
    "cpy-cli": "^3.1.1",
    "cross-env": "^7.0.3",
    "customize-cra": "^1.0.0",
    "postcss-preset-env": "^6.7.0",
    "react-app-rewired": "^2.1.8",
    "react-dev-utils": "^11.0.4",
    "react-scripts": "^4.0.3",
    "vite": "^2.6.3"
  }
}

vite.config.js

import path from 'path';
import reactRefresh from '@vitejs/plugin-react-refresh';

const SRC_DIR = path.resolve(__dirname, './src');
const PUBLIC_DIR = path.resolve(__dirname, './public');
const BUILD_DIR = path.resolve(__dirname, './www',);

export default {
  plugins: [
    reactRefresh({
      babel: {
        presets: [
          '@babel/preset-react',
          ['@babel/preset-env', {
            modules: false,
          }],
        ],
        plugins: [
          '@babel/plugin-transform-runtime',
          '@babel/plugin-syntax-dynamic-import',
          ['@babel/plugin-proposal-decorators', {'legacy':true}],
          ['@babel/plugin-proposal-class-properties', {'loose':true}]
        ],
        babelrc : true,
        configFile : true
      }
    })
  ],
  root: SRC_DIR,
  base: '',
  publicDir: PUBLIC_DIR,
  build: {
    outDir: BUILD_DIR,
    assetsInlineLimit: 0,
    emptyOutDir: true,
  },
  resolve: {
    alias: {
      '@': SRC_DIR,
    },
  },
  server: {
    host: true,
  },

};

Error

src/pages/common/modules/store/RootStore.jsx:17:4: error: Expected identifier but found “@”
17 @observable keepAlive;

error when starting dev server:

Error: Build failed with 1 error:
src/pages/common/modules/store/RootStore.jsx:17:4: error: Expected identifier but found "@"
    at failureErrorWithLog (C:\ReactVmt\node_modules\esbuild\lib\main.js:1493:15)
    at C:\ReactVmt\node_modules\esbuild\lib\main.js:1151:28
    at runOnEndCallbacks (C:\ReactVmt\node_modules\esbuild\lib\main.js:941:63)
    at buildResponseToResult (C:\ReactVmt\node_modules\esbuild\lib\main.js:1149:7)
    at C:\ReactVmt\node_modules\esbuild\lib\main.js:1258:14
    at C:\ReactVmt\node_modules\esbuild\lib\main.js:629:9
    at handleIncomingPacket (C:\ReactVmt\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (C:\ReactVmt\node_modules\esbuild\lib\main.js:596:7)
    at Socket.emit (events.js:315:20)
    at addChunk (_stream_readable.js:297:12)