Can't use TS decorators with Vite + TS quasar project

[rdhelms]

What happened?

I'm trying to use a custom decorator inside a <script lang="ts"> block, but I'm getting this error:

I understand that this error is referring to needing a babel plugin like @babel/plugin-proposal-decorators, but even after adding that plugin the decorator does not work. Additionally, I do not need that plugin to be able to use custom decorators inside a <script lang="ts"> block in regular vite + TS apps without quasar so I'm not sure why it should be required here.

What did you expect to happen?

I already have "experimentalDecorators": true in my tsconfig, so I would expect that decorators should work fine in TS contexts within a quasar app.

Reproduction URL

https://stackblitz.com/edit/stackblitz-starters-e5apuw?file=src%2FApp.vue

How to reproduce?

1. Go to the provided reproduction link
2. The error should load right away
3. You can see that the project already has "experimentalDecorators": true in the tsconfig, and the decorators plugin is being added in quasar.config.js

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

TypeScript Support

Platforms/Browsers

Chrome

Quasar info output

Operating System - Darwin(21.6.0) - darwin/arm64
NodeJs - 16.14.0

Global packages
  NPM - 8.3.1
  yarn - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.12.7 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.6.2 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.7 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.3.4 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.50.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

3:06:31 PM [vite] Internal server error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (4:0)
  Plugin: vite:vue

Additional context

My local reproduction of the issue was created using the following npm init quasar options:

✔ What would you like to build? › App with Quasar CLI, let's go!
✔ Project folder: … quasar-project
✔ Pick Quasar version: › Quasar v2 (Vue 3 | latest and greatest)
✔ Pick script type: › Typescript
✔ Pick Quasar App CLI variant: › Quasar App CLI with Vite
✔ Package name: … quasar-project
✔ Project product name: (must start with letter if building mobile apps) … Quasar App
✔ Project description: … A Quasar Project
✔ Author: … My Name <myemail@foo.bar>
✔ Pick a Vue component style: › Options API
✔ Pick your CSS preprocessor: › Sass with SCSS syntax
✔ Check the features needed for your project: › ESLint
✔ Pick an ESLint preset: › Standard

And then I installed vue-facing-decorator:

npm i vue-facing-decorator

And then I updated the script block in src/App.vue to:

<script lang="ts">
import { Component, Vue } from 'vue-facing-decorator'

@Component
export default class App extends Vue {}
</script>

[yusufkandemir]

Additionally, I do not need that plugin to be able to use custom decorators inside a <script lang="ts"> block in regular vite + TS apps without quasar so I'm not sure why it should be required here.

It's because the current major version of @quasar/app-vite (v1.x) uses Vite v2.x, which doesn't have decorators enabled by default. The new major version, which is in hidden alpha now, uses Vite 5 which has it enabled by default. See #14077. In the meanwhile, you can try using Vite 4 with the current major version, it works properly almost all the time: #14077 (comment)

[rdhelms]

Thanks @yusufkandemir!