Shoelace 2.6.0 is broken when used with Vue in production build

[podlebar]

Describe the bug

When following the instructions (https://shoelace.style/frameworks/vue) on the shoelace documentation it only works in dev mode. Production builds are failing as no components are shown.

To Reproduce

clone the repo bellow, yarn install and than yarn build && yarn preview.. see the output on the localhost url... the components are not loaded at all.

There is Output that is logged that could lead to a solution or give a hint what is wrong.

Demo

https://github.com/podlebar/shoelace-fail

Vercel deploy:

https://shoelace-fail.vercel.app/

Env

node -v
v18.16.1

Also our productive app hosted on vercel can not be redeployed as the new build is broken.

[podlebar]

Version 2.4.0 and 2.5.2 work fine

[Zozman]

I also had broken builds with 2.6.0 when used in vanilla JavaScript Webpack production mode and downgrading seems to fix the issue. In my example it seems that styles just aren't applied to Shoelace elements at all such as this example where there is no styling information attached to the :host element for a sl-drawer :

Meanwhile a 2.5.2 drawer has :host items like these:

[bauglir]

The linked example (and looking at the screenshots as well) don't actually include the actual components, just the regular HTML tags. Note the missing shadow-roots in the element selector on the sl-drawer and the sl-qr-code elements. This suggests the components aren't being defined correctly.

I'd think this is a duplicate of #1479 and should be fixed by #1485, but I haven't dug to deeply into that.

[KonnorRogers]

@bauglir your assessment is correct. Duplicate of #1479 and fixed in #1485

[podlebar]

@bauglir @KonnorRogers
do you mean @Zozman example? because i have the components cherrypicked here: https://github.com/podlebar/shoelace-fail/blob/main/src/App.vue#L13

but as far i understood a patch will be released shortly right?

[bauglir]

I meant your example as well @podlebar, it's the same issue. Cherry-picking the components has no impact on this as that ends up pulling in the chunk files referenced in #1450 (comment) through the CDN.

The registration of the components in the CustomElementRegistry gets tree-shaken out for production builds, resulting in the "component" being rendered as a plain HTML tag in your example.

If the component would have been properly registered with the CustomElementRegistry, that would have shown a #shadow-root with the shadow DOM of the QR code inside it.