decorators not support in js for prebuild

[soulcm]

⚠️ IMPORTANT ⚠️ Please do not ignore this template. If you do, your issue will be closed immediately.

• Read the docs.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• This is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Describe the bug

运行 dev时，因为有预购建，导致esbuild无法识别js中的decorators，报如下错误

Reproduction

code 如下

// test.js
function sealed() {
  console.log('sealed');
}

@sealed
class Greeter {
  greeting;
  constructor(message) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

export default Greeter;

// main.tsx
import App from './App'
import Gretter from './test';

console.log(new Gretter())

1. yarn dev

PS. yarn build时，加入了babel插件且无预购建步骤，因此不会报错

System Info

• vite version: 2.0.3
• Operating System: mac os
• Node version: v12.14.1
• Package manager (npm/yarn/pnpm) and version: yarn

Logs (Optional if provided reproduction)

1. yarn dev

[DanielLaubacher]

I believe this is because of how esbuild is leveraged.

vite/packages/vite/src/node/plugins/esbuild.ts

Line 60 in 103dec9

const result = await transform(code, resolvedOptions)

. There doesn't seem to be any way to make esbuild aware of the option to handle decorators. https://github.com/evanw/esbuild/blob/master/CHANGELOG.md#0410

I'm not sure if esbuild will compile decorators in a JS project since I discovered this in a TS project.

[soulcm]

I believe this is because of how esbuild is leveraged.

vite/packages/vite/src/node/plugins/esbuild.ts

Line 60 in 103dec9

const result = await transform(code, resolvedOptions)

. There doesn't seem to be any way to make esbuild aware of the option to handle decorators. https://github.com/evanw/esbuild/blob/master/CHANGELOG.md#0410
I'm not sure if esbuild will compile decorators in a JS project since I discovered this in a TS project.

Yes，esbuild dose not support decorator of javascript, it just support typescript. And vite when prebuild in scanImports function will use esbuild direct.
Now, I have rename my project files use ts instead of js and works fine.

But I hope vite can have a method to solve this issue, thanks

[DanielLaubacher]

Now, I have rename my project files use ts instead of js and works fine.

Do you have Vite working with decorators or only esbuild?

[liho00]

having this issue as well. Anyone has the solution for it?

[haoqunjiang]

Closing as it's an esbuild issue evanw/esbuild#1392

Though, in my opinion, such usage should be discouraged. Decorators in JS is still a stage-2 proposal, so it's still subject to change in the future. Its current specification is drastically different from the TypeScript implementation, too, which might surprise many users.

[PRossetti]

having this issue as well. Anyone has the solution for it?

Having the same issue here. Trying to use decorators with js (not typescript) because I'm working in a project that uses mobx to state management and mobx uses decorators.

[soulcm]

Having the same issue here. Trying to use decorators with js (not typescript) because I'm working in a project that uses mobx to state management and mobx uses decorators.

yes, my project use mobx too. I have renamed the file from jsx to tsx and work fine.

[Shinigami92]

yes, my project use mobx too. I have renamed the file from jsx to tsx and work fine.

I would count this as a very smart workaround 🙂

[PRossetti]

Having the same issue here. Trying to use decorators with js (not typescript) because I'm working in a project that uses mobx to state management and mobx uses decorators.

yes, my project use mobx too. I have renamed the file from jsx to tsx and work fine.

Didn't you need any other change in vite.config.js? did you had to add a tsconfig.json file?