search

GriffinJohnston / ldrs

Modern, tree-shakeable loader & spinner web components. Made with CSS, HTML and SVG. https://uiball.com/ldrs
MIT License
1.75k stars 54 forks source link

Sveltekit: Error when evaluating SSR module #26

Closed herkyl closed 2 months ago

herkyl commented 3 months ago

I'm getting the error on Sveltekit:

8:46:43 PM [vite] Error when evaluating SSR module /src/routes/experiments/[key]/+page.svelte: failed to import "ldrs"
|- ReferenceError: HTMLElement is not defined

How do I make ldrs work on Svelte?

GriffinJohnston commented 3 months ago

Hi, for SvelteKit I recommend including the CDN version of the loader in a script tag. So in your app.html, place the following just after your opening <body> tag (changing to the specific loader you want of course):

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/helix.js"
></script>
herkyl commented 2 months ago

Can confirm it worked:

Add this to the HTML file:

<script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/ripples.js"></script>

Then just add this to a Svelte file:

<l-ripples
  size="45"
  speed="2"
  color="black" 
></l-ripples>