vuejs/core

Using export & then using decorator before the word "default" breaks SFC compilation.

andrewbrennanfr opened this issue · 2 comments

andrewbrennanfr commented

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.

andrewbrennanfr commented

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

posva commented

vuejs/vue#13060 is the correct one 👍