Subscribe on changes!

Unable to use new decorators in vue with vite and babel

avatar
Nov 7th 2023

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

avatar
Nov 9th 2023

How would I know which version this fix will be released in?