dennis_10-33
dennis_10-33

Reputation: 49

SvelteKit / After run build many Components lost

I've finished my work on my Svelte-Project, everything worked in dev-enviorment, I started the build-process and after starting the preview version (npm run preview) mostly nothing worked anymore...

After talking to some collegues they told me that probably the project-structur is the problem. There are several .svelte-Components in src/lib/flowcharts for example which would be loaded dependent on what the user clicked. (User click on item A and component a.svelte would be loaded) In these components is located an svg with static href's and some on:click-events and in some components additional javascript-code for filtering data. But after issuing the npm run build most of these components are missing and most of my functions didn't work anymore.

Is it true that this would never work and that I have to build something like a loder-component, load only the svg-images, forward click-events and so on? I can't believe that there are so many differents between dev und production-enviorment...

I just tried to put these files in the static folder, but this doesn't make any diffrence. To clearify: If it's possible I want to avoid importing every svelte-component on the sides because I don't want to touch every page when some new component will be added.

Upvotes: 0

Views: 145

Answers (1)

brunnerh
brunnerh

Reputation: 185180

Everything that should be in the build output that is an asset should be imported. If you have many assets that are dynamically resolved you can use an (eager) glob import and index into the resulting object using the original, relative path.

This should be usable for images and components. If you need to change the type of the resulting import (e.g. to a URL for assets that do not yield a URL by default), you can specify a custom query.

E.g. iterating all components in a sub-folder:

<script>
    const components = import.meta.glob('./sub/*.svelte', { eager: true });
</script>

{#each Object.values(components) as component}
    <svelte:component this={component.default} />
{/each}

Upvotes: 0

Related Questions