decorators not support in js for prebuild

⚠️ 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())

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)

yarn dev

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.

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

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?

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

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.

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.

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.

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 🙂

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?

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

Yes. Just use the official doc for vite.config.js.
tsconfig.json also need to add for typescript work fine.