Closed
Description
- 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
viteversion: 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
Activity
[-]decorators not support in js for pre-build[/-][+]decorators not support in js for prebuild（vite dev）[/+][-]decorators not support in js for prebuild（vite dev）[/-][+]decorators not support in js for prebuild[/+]dlaub3 commentedon Mar 16, 2021
I believe this is because of how esbuild is leveraged.
vite/packages/vite/src/node/plugins/esbuild.ts
Line 60 in 103dec9
I'm not sure if esbuild will compile decorators in a JS project since I discovered this in a TS project.
soulcm commentedon Mar 17, 2021
Yes，esbuild dose not support decorator of javascript, it just support typescript. And vite when prebuild in
scanImportsfunction 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
dlaub3 commentedon Mar 17, 2021
Do you have Vite working with decorators or only esbuild?
liho00 commentedon Jun 22, 2021
having this issue as well. Anyone has the solution for it?
haoqunjiang commentedon Jun 23, 2021
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 commentedon Jul 8, 2021
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 commentedon Jul 8, 2021
yes, my project use
mobxtoo. I have renamed the file from jsx to tsx and work fine.Shinigami92 commentedon Jul 8, 2021
I would count this as a very smart workaround 🙂
PRossetti commentedon Jul 9, 2021
Didn't you need any other change in
vite.config.js? did you had to add atsconfig.jsonfile?3 remaining items