Using export & then using decorator before the word "default" breaks SFC compilation.
Vue version
2.7.14
Link to minimal reproduction
https://stackblitz.com/edit/vitejs-vite-bctp3t?file=src%2FApp.vue
Steps to reproduce
Export a const from a SFC.
Use a
vue-property-decorator
with@Component
& export your class component as default.Include the word "default" in a comment (for example).
Your component is not built correctly - in my reproduction example, the props are not initialized as an object. (you can see there is also no console warning related to
someString
).Remove the word "default" from the comment & refresh the page - props will initialize correctly & you also have the expected console warning.
Looks very similar to several issues (such as this one & this one)
Apparently this has been fixed here.
However it fails to work for me when @babel/parser
is upgraded beyond 7.19.6
🟢 Working use case with 7.19.6
🛑 Non-working use case with 7.20.0
What is expected?
I expect my component to be built correctly & to not have a comment impacting the behavior of my component.
What is actually happening?
When inspecting the compiled code - it looks to me that the @Component
decorator here is just completely stripped in the outputted code.
System Info
No response
Any additional comments?
Workaround for me, is to override @babel/parser
for @vue/sfc-compiler
to be 7.19.6
and the problem disappears.
Removing the exported const/type/interface/etc from the SFC works around the issue.
Moving the exported const/interface/type/etc below the class component also works around the issue.
This issue is not isolated to only comments, but rather the presence of default
.
Meaning, code such as @Prop({ type: String, required: false, default: '' })
is also breaking - as the word default
here has the same impact.
After some more debugging - seems that the method hasDefaultExport
in vuejs/vue
is the one that's broken for this case & the one in vuejs/core
is working.
https://github.com/vuejs/vue/blob/main/packages/compiler-sfc/src/rewriteDefault.ts#L91-L93
This regex change here would cause some unit tests (for my use case) start to fail. And for me this regex is maybe too loose.
Here 👉 there's no default export, yet this regex is a match https://regex101.com/r/LmYL8l/1
https://github.com/vuejs/vue/issues/13060 is the correct one 👍