Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

I can't import Svelte components from any other location except the parent except from the same path as the +page.svelte

$
0
0

So, when i try to import some .js or .txt using the $lib or src/lib it works just fine, but when trying to import components that are in the .svelte alias it returns this error on the server and a [500] Internal Error on the page

4:52:38 PM [vite] page reload src/routes/Inner.svelteError: <UserDiv> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <UserDiv>.    at Module.validate_component (E:/body/vsc/svelte-learn/node_modules/svelte/src/runtime/internal/ssr.js:142:9)    at eval (E:/body/vsc/svelte-learn/src/routes/+page.svelte:14:35)    at Module.each (E:/body/vsc/svelte-learn/node_modules/svelte/src/runtime/internal/ssr.js:128:10)    at eval (E:/body/vsc/svelte-learn/src/routes/+page.svelte:13:39)    at Object.$$render (E:/body/vsc/svelte-learn/node_modules/svelte/src/runtime/internal/ssr.js:174:16)    at Object.default (E:/body/vsc/svelte-learn/.svelte-kit/generated/root.svelte:74:138)    at eval (E:/body/vsc/svelte-learn/node_modules/@sveltejs/kit/src/runtime/components/layout.svelte:8:41)    at Object.$$render (E:/body/vsc/svelte-learn/node_modules/svelte/src/runtime/internal/ssr.js:174:16)    at eval (E:/body/vsc/svelte-learn/.svelte-kit/generated/root.svelte:63:129)    at $$render (E:/body/vsc/svelte-learn/node_modules/svelte/src/runtime/internal/ssr.js:174:16)

but when i use a component in the same directory as the +page.svelte it works, what is the reason behind that?! is it fixable ?!

here is the code for the import +page.svelte

<script>    import {data} from "$lib/testdata.js" //works fine    import {UserDiv} from "$lib/components/UserDiv.svelte" //doesn't work</script><div>    {#each data.users as user}<UserDiv {user} />    {/each}</div>

here is the component src/lib/components/UserDiv.svelte

<script>    export let user;</script><div><span>id [{user.id}] belongs to {user.name} who's age {user.age}</span></div>

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>