Skip to content

When a component is exposed inside an object property, like in the Compound Component pattern, the component is not rendered when built #13920

@MakhBeth

Description

@MakhBeth

Vue version

3.5.18

Link to minimal reproduction

https://github.com/MakhBeth/vue-vite-compound-component-issue/tree/main

Steps to reproduce

  1. Run the app in the development environment with npm run dev — everything works as expected.
  2. Build the app with npm run build.
  3. Launch the built app from the dist folder using npm run start.
  4. Observe that the component passed as an object property is not rendered.

What is expected?

Same output between dev environment and production: the component should be rendered when passed as an object property via props.

What is actually happening?

In build env, instead of having the component rendered, you will have an empty html tag.

System Info

Any additional comments?

I'm developing a Vue library based on Tanstack Query. Our library enriches the form object, with some components, like Input, Errors, etc, that help manage the form.
Everything works fine in dev environment, but when we build, all the <form.Input /> tags are transformed in simple html tags like <form.input></form.input>

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.scope: sfc

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions