Method decorator does not work with vite

1

Hi,

When using vite, the method decorator cannot be used (@watch for instance). The decorator appears “as is” in the js file sent to the browser in development mode (npm run dev) so the browser throws an error (illegal character U+0040) and at build time (npm run buildwhich executes tsc && vite build) rollup throws an error because @ is invalid. Class decorators (@inject) work well.

Using esbuild-plugin-tsc could be a solution but vite config file does not give any option to configure esbuild.

Aurelia is not responsible for that, but since there is a vite plugin is there a “recommended way” to make function decorators work ?

For the moment I use IObserverLocator instead of @watch but this kind of “Plan B” may not always be possible.

Thanks !

2

It is related to bindable decorator should not be giving a runtime error · Issue #1980 · aurelia/aurelia · GitHub and Compile fails on typescript decorators · Issue #17308 · vitejs/vite · GitHub .

vite latest version (5.2.11) uses esbuild 0.20.2 while decorators are supported since esbuild 0.21.3 (Release v0.21.3 · evanw/esbuild · GitHub). Overriding the esbuild version in package.json should help but it does not.

3

Solved: overriding esbuild version helps but it is not enough, vite.config.js must declare:

esbuild: {
        target: "es2020"
    }

As written here Execution of vite build fails on typescript decorators · Issue #17308 · vitejs/vite · GitHub :

esbuild has two ways to set the transform target: its target top-level option, and
tsconfigRaw.compilerOptions.target option (from tsconfig.json). The former Vite sets as esnext and esbuild will prioritize that over tsconfigRaw."

For the moment, esbuild version has to be overridden in the package.json :

  "overrides": {
    "vite": {
      "esbuild": "0.21.4"
    }

but it won’t be necessary anymore with future versions of vite (which will use updated version of esbuild as internal dependency, see chore(deps): update esbuild by amweiss · Pull Request #17290 · vitejs/vite · GitHub).

5 Likes
4

In Vite, method decorators like @watch aren’t functioning correctly due to how Vite handles decorators in development mode. A potential solution involves using esbuild-plugin-tsc to transpile TypeScript code with decorators properly. However, configuring this plugin within the Vite config file might be tricky. Exploring Vite plugins or community suggestions could help find a solution. As a temporary fix, consider using alternatives like IObserverLocator instead of @watch.