Whitespace configuration produces an error when <template #default> is used
Version
3.1.0-beta.3
Reproduction link
- https://github.com/AnnaYuS/repro-vue3-whitespace
- sfc playground (but can't show the error)
Steps to reproduce
Serve the project from reproduction repository.
What is expected?
Project runs successfully
What is actually happening?
With the webpack configuration of the whitespace strategy this throws an error
VueCompilerError: Extraneous children found when component already has explicitly named default slot. These children will be ignored.
at /Users/.../Desktop/hello-world/src/components/HelloWorld.vue:10:16 8 | <template #default> 9 | default template content 10 | </template> | ^ 11 | | ^ 12 | <template #buttons> | ^^^^
The component has a default slot that is "filled in" using <template #default>.... This syntax could be omitted and the error could be avoided. Actually in the console it says warning, but in fact it's an error.
To avoid confusion with named slots we need this to work in our current project. With the older versions of Vue it works fine, but they don't allow to change whitespace configuration.
as a workaround you can stick both templates together:
<template #default>
...
</template><template #named>....</template>
@HcySunYang it's not exactly fixed yet. Only works with @posva's workaround
are you sure? Not released yet
@HcySunYang My bad, all good 👍