esbuild

esbuild copied to clipboard

error: Decorators are not supported yet

Any plan to support decorators?

https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/babel-preset-app#readme

Hope can support Decorators, then we can try it in vue project.

The decorator spec unfortunately still seems like it's a long way off, both based on low activity and based on how many things it looks like they still have to figure out. The proposal has drifted pretty far from what the entire rest of the JavaScript ecosystem has been doing for many years. It also appears to be incompatible with a lot of the JavaScript ecosystem (e.g. no CommonJS support). So I'm not planning on supporting decorators based on the spec, at least not any time soon.

Separate from that, decorators in TypeScript have been around for a while behind the experimentalDecorators flag, and have found a lot of adoption in the web development community. I think esbuild would be useful to many more people if it had support for TypeScript-style decorators. So I'm planning to implement those at some point.

nest.js is a great web framework but it's extremely slow during compilation. There are over 20 modules in my project. :(

An initial implementation of TypeScript decorators has been released in version 0.4.10. You can read more about this in the release notes. Please let me know if you encounter any issues.

I have a JS project, not TS. When compiling decorators, it throws errors:

[vite:esbuild] Transform failed with 1 error:
/Users/guoyunhe/src/pages/aaa/components/bbb/index.jsx:13:0: error: Unexpected "@"
file: /Users/guoyunhe/src/pages/aaa/components/bbb/index.jsx:13:0

Unexpected "@"
12 |  
   |   ^
13 |  @connect(({ aaa, bbb }) => ({
   |  ^
14 |    aaa,

Decorators are not a JS feature, so esbuild doesn't support them in JS. Nothing in the JS specification mentions decorators: https://262.ecma-international.org/12.0/. But they are a TS feature, so esbuild supports them in TS. You can tell esbuild to compile your JS as TS if you like: --loader:.jsx=tsx.

Decorators are not a JS feature, so esbuild doesn't support them in JS. Nothing in the JS specification mentions decorators: https://262.ecma-international.org/12.0/. But they are a TS feature, so esbuild supports them in TS. You can tell esbuild to compile your JS as TS if you like: --loader:.jsx=tsx.

Thanks. I am now moving my project to TS and it works very well.

Looks like decorators but without the metadata has moved to stage 3 and i am sure typescript will implement this in a while, what are your plans for javascript decorators support, @evanw

My plans are to implement it after it has shipped in a browser, in node, or in TypeScript. This is the same thing that I do for all other syntax features.

TypeScript implemented this on 5.0 beta

https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#decorators

I looked into this in more detail and it seems like TypeScript is only doing a partial implementation. Work on the specification is ongoing and the API is likely going to change, at which point TypeScript will also have to change their implementation too: https://github.com/tc39/proposal-decorators/issues/494. So implementing this in esbuild still seems premature (although it's closer than before!).

I believe everything's been resolved as of today:

• https://github.com/babel/proposals/issues/86#issuecomment-1414281106
• https://github.com/microsoft/TypeScript/pull/52582

Hi @evanw, could this ticket be re-opened now that https://github.com/tc39/proposal-decorators/issues/494 has been closed and necessary changes been merged into the spec?

It looks like the specification is still actively being iterated on. For example: https://github.com/tc39/proposal-decorators/issues/499. I can reopen this issue if you want, but I still don't think it's the right time for esbuild to implement this yet as the specification is still evolving.

https://github.com/tc39/proposal-decorators/issues/499 is fully merged and there is no any real issues now to implement decorators.

At the moment, the fact that esbuild doesn't even parse @decorator accessor field results in Vite reporting an error when it attempts to scan files containing that syntax for dependencies.

This makes it impossible to work around the current limitation in esbuild by using Vite plugins, since Vite assumes that it esbuild will be able to parse the syntax of JS files.

And while there have been some minor changes in semantics, the syntax of decorators has remained forwards compatible since decorators were approved for Stage 3.

Is there any chance that you would be willing to implement Stage 3 syntax in advance of implementing the full compilation?

Yes, I'm planning to do this. That's one of the main reasons why I did the work behind #3019. Previously esbuild considered all decorators in TypeScript files to be experimental decorators regardless of TypeScript's experimentalDecorators setting. This was blocking esbuild's implementation of JavaScript decorators, but that has been unblocked now that esbuild has started requiring experimentalDecorators: true to use experimental decorators in version 0.18.0+.

Version 0.18.5 of esbuild now supports parsing and printing JavaScript decorators, and parsing and transforming auto-accessors. Please try out these features and let me know if you encounter any problems.

Did something change with 0.18.5? Decorators started to appear in transpiled code at the moment like this:

var MonitoringApp = class {
  @(observable)
  isVisiblePerson = false;
  @(observable)
  personDetectorConnected = false;
...

And causes syntax errors.

Do you have a tsconfig with experimentalDecorators set? Otherwise, you're using the new "standard" decorators which AFAIK esbuild has not yet implemented downleveling for (and therefore stays in the output).

@jakebailey thank you!

I had to add

1. tsconfig.json with experimentalDecorators (previously it was fine without it)
2. in esbuild config a new line tsconfig: "tsconfig.json",

I was using Deno to call esbuild, it worked fine a month ago but 0.18.5 indeed disabled the default setting.

Note that you can also provide tsconfigRaw rather than creating an all new tsconfig, though I'm not quite sure what TS setup you'd have without a tsconfig at all. I guess if you're trying to bundle Deno code but that's a few too many technologies for me to reason about in my head 😄

any chance to support emitDecoratorMetadata? it's very desired https://github.com/nestjs/nest-cli/issues/731#issuecomment-1041573532

The link you pasted already has the answer:

The emitDecoratorMetadata TypeScript configuration option is not supported. This feature passes a JavaScript representation of the corresponding TypeScript type to the attached decorator function. Since esbuild does not replicate TypeScript's type system, it does not have enough information to implement this feature.

It would be really nice for esbuild to support typescript's new decorators (the proposal one) without the experimentalDecorators flag.

I ported my project to vite/esbuild from tsc and came across annoying problem that made me bang my head to a wall for too long :

Typescript (tsc 5.x) supports the class decorator syntax like this :

export @decorator class Test {}

But with esbuild this leads to the dreaded 'Unexpected "@"...' error. This can be fixed by moving the "export" to separate line :

@decorator class Test {}
export { Test }

Hope this helps to protect someone else's head.

Standard decorators are now implemented in TypeScript and Babel, and at least Firefox is also implementing now. I think Chrome is at least implementing the accessor keyword.

So I guess no esbuild for any serious typescript development, given that most major frameworks for typescript use decorators.

most major frameworks for typescript use decorators

@iyobo Those frameworks at least did not use the RIGHT decorators in a long term. I don't think they represent the whole TypeScript ecosystem.

I program in TypeScript, not DecoratorScript.

@shigma what sort of decorator is the RIGHT decorator?

@shigma what sort of decorator is the RIGHT decorator?

Legacy vs experimental decorators: https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#decorators#differences-with-experimental-legacy-decorators