Subscribe on changes!

Slots don't work on compiled SFC when imported to a client project

avatar
Jul 8th 2021

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

avatar
Jul 8th 2021

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

avatar
Jul 9th 2021

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.

avatar
Jul 9th 2021

@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