How can I implement decorator pattern in React with Vite?

[maifeeulasad]

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. */
      },
      ...
    }

Using these version of React and Vite

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

I have been trying hard to do so. How can I make it work?

[maifeeulasad]

Project for reproduction: https://github.com/maifeeulasad/idb-test.git

The library I am trying to import: https://github.com/maifeeulasad/idb-ts

[TechQuery]

Vite's support of ES Decorator is suck! Just use Parcel to save your life: https://github.com/idea2app/React-MobX-Bootstrap-ts

[maifeeulasad]

Thanks, man. But my circumstances didn't allow me to move away from vite. But I'm now exploring parcel, again.

[maifeeulasad]

Resolved by enabling experimental decorators from typescript. Now it works.

But vite should also add support for this.

[TechQuery]

Parcel is the easist one to configure ES Decorator stage-3 compiling, "experimental decorators" is outdated.