How do i enable "@babel/plugin-proposal-decorators" with vite?

[zebratt]

 > src/App.jsx:22:0: error: Unexpected "@"
    22 │ @observer

error when starting dev server:
Error: Build failed with 1 error:
src/App.jsx:22:0: error: Unexpected "@"

I use the observer as a decorator then i got the error, are there anyway to solve this? Can not find a place to enable this option.

[patak-cat]

Check out https://www.npmjs.com/package/@rollup/plugin-babel, which is compatible with Vite.

[maifeeulasad]

I have been trying hard to do so.

But I keep getting errors like this

1:45:25 PM [vite] Internal server error: /home/user/codes/idb-test/src/index.tsx: Support for the experimental syntax 'decorators' isn't currently enabled (6:1):

  4 |
  5 |
> 6 | @DataClass()
    | ^
  7 | class User {
  8 |   @KeyPath()
  9 |   name: string;

Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
  Plugin: vite:react-babel
  File: /home/user/codes/idb-test/src/index.tsx
  3  |  
  4  |  
  5  |  
     |   ^
  6  |  @DataClass()
  7  |  class User {
      at instantiate (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:72:32)
      at constructor (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:366:12)
      at Parser.raise (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:3453:19)
      at Parser.expectOnePlugin (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:3510:18)
      at Parser.parseDecorator (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:14977:10)
      at Parser.parseDecorators (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:14955:30)
      at Parser.parseStatement (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:14774:12)
      at Parser.parseBlockOrModuleBlockBody (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:15420:25)
      at Parser.parseBlockBody (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:15411:10)
      at Parser.parseProgram (/home/user/codes/idb-test/node_modules/@babel/parser/lib/index.js:14695:10)
1:45:25 PM [vite] Internal server error: /home/user/codes/idb-test/babel.config.js: Error while loading config - Unexpected token 'export'
  Plugin: babel
  File: /home/user/codes/idb-test/node_modules/vite/dist/client/client.mjs
      at wrapSafe (node:internal/modules/cjs/loader:1378:20)
      at Module._compile (node:internal/modules/cjs/loader:1428:41)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at Module.require (node:internal/modules/cjs/loader:1311:19)
      at require (node:internal/modules/helpers:179:18)
      at loadCjsDefault (/home/user/codes/idb-test/node_modules/@babel/core/lib/config/files/module-types.js:100:18)
      at loadCjsOrMjsDefault (/home/user/codes/idb-test/node_modules/@babel/core/lib/config/files/module-types.js:72:16)
      at loadCjsOrMjsDefault.next (<anonymous>)

I have tried setting up using babel config

export default {
    presets: [
      ['@babel/preset-env', { targets: "defaults" }]
    ],
    plugins: [
      ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }],
      '@babel/plugin-proposal-class-properties'
    ]
  };

And I have set the experimental option to true

{
  "compilerOptions": {
    ...
    "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
  },
  ...
}

How can I make it work?
Using these version of React and Vite

    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "vite": "^2.9.9",

[TechQuery]

I have been trying hard to do so.

But I keep getting errors like this

@maifeeulasad I have been tried several times with Vite in these years, only Parcel can resolved this issue.

Look at this Git commit history, the best decision I have made is replace webpack & Vite with Parcel: https://github.com/idea2app/Vue-MobX-Prime-ts/commits/master/