TypeScript 5 Decorators + Esbuild

[angelhdzmultimedia]

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.

[angelhdzmultimedia]

Oooh, decorators are not working at all:

@controller()
^

SyntaxError: Invalid or unexpected token

[angelhdzmultimedia]

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

[angelhdzmultimedia]

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

[angelhdzmultimedia]

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

[Kapelianovych]

For some reason it does not work. I have tried to set target to any value from es2020 to esnext, but no luck. I am trying to make it work in JS files though.

[what1s1ove]

Hey @Kapelianovych ! Did you manage to get decorators working in JS files? 🙏

[Kapelianovych]

@what1s1ove check this comment.

[what1s1ove]

@Kapelianovych thank you for investigating, man!