Using export & then using decorator before the word "default" breaks SFC compilation.
andrewbrennanfr opened this issue Β· comments
Version
2.7.14
Reproduction link
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
After some debugging it 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
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.
π I've probably mistakenly opened an issue on vue/core
here
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.
π‘ I've attempted a sort of "backport" of the changes from vue/core
& added a test for my use case. It looks to work.
https://github.com/andrewbrennanfr/vue/commits/fix/rewriteDefault-decorator-parsing
Perhaps this could be a cleaner "fix" - making the regex's a bit more explicit?
andrewbrennanfr@e6e26fb
I'm seeing the same problem in vite. This was a very nasty bug to debug and discover.
Workaround for me, is to override @babel/parser for @vue/sfc-compiler to be 7.19.6 and the problem disappears.
Not sure how to accomplish the same result this with vite
and @vitejs/plugin-vue2
I forced the babel parser to 7.19.6 with yarn add @babel/parser@7.19.6
but the issue persists
@gbalduzzi Not sure it's particularly to do with Vite. We use Vite also & still managed to work around it.
I don't know your specific setup, but not sure running yarn add @babel/parser@7.19.6
would necessarily fix it.
Adding something like:
"overrides": {
"@vue/compiler-sfc": {
"@babel/parser": "7.19.6"
}
}
To our package.json
definitely overrides @babel/parser
& "fixes" the issue.
Bare in mind, our intention is that this is temporary. Upgrading to vue3 should resolve the issue properly
@andrewbrennanfr thank you, I can confirm this works.
Yes, this is a temporary solution for us too while we migrate to vue3