Self hosting Shoelace

[steunix]

I'm trying to self hosting Shoelace (2.16.0) in a Node project, and following the doc I've used

<link rel="stylesheet" href="/shoelace/dist/themes/light.css"/>
<script type="module" src="/shoelace/dist/shoelace-autoloader.js"></script>

assigning /sholelace to static 'node_modules/@shoelace-style/shoelace'
Note that I've used the shoelace-autoloader.js while the doc only talks about 'shoelace.js'

When loading the page (which is using sl-input and sl-button) I can see from debug console that every chunk script is correctly loaded, no errors, but no sl- component is shown.

Instead, they are correctly shown if I use
<script type="module" src="/shoelace/cdn/shoelace-autoloader.js"></script>

Have I gotten it wrong?

[KonnorRogers]

dist/ does not bundle dependencies. Which means to use /dist you need to either pass it through a bundler, or provide importmaps for dependency resolution.

You can read more about it here:

https://shoelace.style/getting-started/installation/#the-difference-between-cdn-and-npm

[steunix]

Thanks for the reply. Then I guess cdn/ usage is legit in my case.

[lestan]

This was really helpful! I ran into the same issue and was stumped. It may help to explain further in the documentation that if you're serving shoelace locally without bundling, you're essentially creating your own cdn and should use the cdn folder instead of disk.

[steunix]

May be a little bit off topic here, but using local /cdn hosted Shoelace causes the autoloaded chunks to be too lazy loaded, resulting in some flickering (sort of FOUC) effect before the web components are rendered. Switching back to official cdn the problem disappears...

May it be due to the fact that official cdn is http2 while local Node is http1.1 (actually, behind a haproxy with h2, but only on the client side)?