Slots don't work on compiled SFC when imported to a client project
Version
3.1.4
Reproduction link
https://github.com/loadpixels/slots-example
Steps to reproduce
- Use either https://github.com/team-innovation/vue-sfc-rollup or https://github.com/shubhadip/vue3-component-library to generate a Vue 3 component library
- Ensure you have a
in a component - Build the project using the scripts provided by the above repos
- Create a client project to consume the library using Vite or vue-cli
- Import the library (I just npm installed from the local file system)
- Add the library to the app using app.use(...)
- Attempt to use a component from the library you just created with slot data
What is expected?
the slots are populated with the content you provide
What is actually happening?
nothing - the slot is never populated, also styles disappear - but i think that's probably a different problem
I've noted that when running on Vite - it works as expected in Development mode, but not when it's built. It doesn't work at all on a project generated by vue-cli
Slot data is still rendered if you use a pure .ts component with a render function - this only appears to affect Single File Components
I've run the same repo steps above using Vue 2 and confirmed everything works.
I can't be absolutely certain that it's not the fault of the above libraries - but vue-rollup-sfc produces working slots when used with Vue 2
Open an issue in the two repositories or open an issue that doesn't use those repositories. If the bug is within vue compiler, you should be able to use https://sfc.vuejs.org to generate the js and copy paste on the same website to create sharable reproduction
I haven't checked your repo in detail but from the symptoms I suspect you're pulling in two copies of Vue. See https://github.com/vuejs/vue-next/issues/2064#issuecomment-797365133 for a possible solution.
@skirtles-code - yes your diagnosis was correct I found the answer here last night https://github.com/vitejs/vite/issues/4089
Turns out it was because of how I was installing my library locally - if I npm pack my library and then install the resulting .tgz file it works perfectly