TypeScript 5 Decorators + Esbuild

[angelhdzdev]

Hello 👋,

I read esbuild now supports TypeScript decorators.
I'm using vite-plugin-vite (express server app) and vite-tsconfig-paths (to convert path aliases).

The error is with the decorators. No matter if I add the decorators before or over the export keyboard, or after it, I get an error.

@qb.group({
  imports: [AuthGroup]
}) 
export class AppGroup<T> implements qb.QbGroupLifeCycle {
  async onInit(options?: qb.QbGroup<T>) {
		
  }
}

error during build: src/app/app.group.ts (5:0): Using the export keyword between a decorator and a class is not allowed. Please use export @dec class instead. (Note that you need plugins to import files that are not JavaScript)

Happens at dev and at build.

I tried with overrides: { "esbuild": "^0.24.0"} in my package.json to force Vite to use latest esbuild version.

I'll appreciate any info, thank you.

[angelhdzdev]

Oooh, decorators are not working at all:

@controller()
^

SyntaxError: Invalid or unexpected token

[angelhdzdev]

Apparently it only works with Experimental Decorators, not with the new official ones...

[angelhdzdev]

Update

It works with the new decorators, but only with vite build. Not in development with vite.

@controller()
^

SyntaxError: Invalid or unexpected token

At least I can work with bun or tsx with watch mode.

[takawitter]

Try changing esbuild.target option in vite.config.js

export default {
    esbuild: {
        target: "es2022"
    }
}

This works for me.

reference: #17308

[angelhdzdev]

When I worked with Nuxt, I used to do that facepalm 🤦‍♂️
In nuxt config I fould set Vite's esbuild target to ESNext or in the whole tsConfig object.
But now I was working in a backend app with vite-plugin-node, and lost my direction haha.

Thank you so much. Working beautifully.

[angelhdzdev]

Not working with target: 'esnext' though. Only up to es2024.