Weird bugs with `export default` after updating to vite-plugin-vue 4.2.0+
Vue version
3.3.4
Link to minimal reproduction
Impossible to reproduce
Steps to reproduce
Unfortunately the bug is so random, I haven't managed to narrow the issue, but I tried different cases, which will hopefully help with identifying the issue.
Error:
C:/[...].vue:134:0: ERROR: Unexpected "export"
Plugin: vite:vue
File: C:/[...].vue:134:0
Unexpected "export"
131|
132| let comp: Composer;
133|
| ^
134| export default defineComponent({
| ^
135|
And here's a chunk of code.
let comp: Composer;
export default defineComponent({
When I modify that chunk like this:
let comp: Composer;
export let aaaaaaaaaaaaa = 5;
export default defineComponent({
the error changes:
Expected ";" but found "_sfc_main"
133| //#endregion
134|
135| let compconst _sfc_main = export let aaaaaaaaaaaaa = 5;
| ^
136|
137| export default defineComponent({
and it looks like whitespaces matter???
let comp: Composer;
export let aaaaaaaaaaaaa = 5;
export default defineComponent({
produces
Expected ";" but found "_sfc_main"
133| //#endregion
134|
135| let comp: Coconst _sfc_main = export let aaaaaaaaaaaaa = 5;
| ^
136|
137| export default defineComponent({
What is expected?
No error
What is actually happening?
When I updated the plugin, my build broke. Unfortunately I didn't manage to narrow the code to minimal reproduction as this bug seems absolutely random but it's clear something is wrong with SFC processing. I have two relatively similar components with export default defineComponent()
, but only one of them produces this error and only in versions starting from 4.2 as it works perfectly with previous plugin versions.
System Info
System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
Memory: 1.16 GB / 7.82 GB
Binaries:
Node: 20.5.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD
pnpm: 8.6.2 - ~\AppData\Local\pnpm\pnpm.EXE
Browsers:
Chrome: 116.0.5845.111
Edge: Spartan (44.22621.1992.0), Chromium (116.0.1938.54)
Internet Explorer: 11.0.22621.1
npmPackages:
vue: ^3.3.4 => 3.3.4
Any additional comments?
No response
@sodatea after dedicating more time, I've managed to find the problem! Turns out it was caused by using reactivity transform macros!
Here's min repro: https://stackblitz.com/edit/vitejs-vite-gpxdap?file=src%2Fcomponents%2FHelloWorld.vue
I know it's deprecated but warning says it will be removed in 3.4, but currently it's 3.3, but it's already broken. Switching to vue-macros
package fixes the issue.
Reactivity Transform has been deprecated and we moved it to Vue Macros. Please try @vue-macros/reactivity-transform
. See docs
See also https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028