Unable to use new decorators in vue with vite and babel
Vue version
3.3.8
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-cbe6hz
Steps to reproduce
Build the given reproduction using npm run build
and see this error:
error during build:
Error: [vue/compiler-sfc] Cannot use the decorators and decorators-legacy plugin together
Even though in vite.config.ts, the vue plugin's config lists the decorators
babel plugin, it is not being considered in the following code.
vue({
script: {
babelParserPlugins: ['decorators'],
},
}),
The following code seems to be the cause of it: https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/context.ts#L167. Since it is never checked if user has passed the decorators plugin before adding the decorators-legacy one, both the plugins end up being pushed in the array
What is expected?
no error on build
What is actually happening?
Error on build
System Info
System:
OS: Windows 10 10.0.19044
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12800H
Binaries:
Node: 18.15.0 - ~\portable_apps\.nvm\versions\node\v18.15.0\bin\node.EXE
npm: 9.5.0 - ~\portable_apps\.nvm\versions\node\v18.15.0\bin\npm.CMD
Any additional comments?
It seems like the plugins
array check to see if it includes 'decorators' is a mistake, since that will always come out to be true. It should check in the userPlugins
array instead