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

huangapple go评论121阅读模式
英文:

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

问题

当我尝试使用$libsrc/lib导入一些.js.txt文件时,一切都正常。但是,当尝试导入位于.svelte别名中的组件时,在服务器上会返回以下错误,并在页面上显示[500] Internal Error

4:52:38 PM [vite] page reload src/routes/Inner.svelte
Error: <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)

但是,当我在与+page.svelte相同的目录中使用组件时,它可以正常工作。这是什么原因?是否可以修复?

这是导入+page.svelte的代码:

<script>
    import {data} from "$lib/testdata.js" //正常工作
    import {UserDiv} from "$lib/components/UserDiv.svelte" //不工作
</script>

<div>
    {#each data.users as user}
        <UserDiv {user} />
    {/each}
</div>

这是组件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>
英文:

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.svelte
Error: <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>

答案1

得分: 2

好的,以下是翻译好的内容:

对的。
你应该像这样导入组件:

import UserDiv from "$lib/components/UserDiv.svelte";

请尝试一下,如果可以工作,请告诉我。
谢谢。

英文:

Right.
You should import component like this:

import UserDiv from "$lib/components/UserDiv.svelte";

Please try it and let me know if it does work.
Thanks

答案2

得分: 0

import { UserDiv } from ... 是错误的,因为它是一个具名导入。组件从 Svelte 文件中作为 默认 导出进行导出。

所以如果没有其他问题(- 错误听起来不像是导入问题,不过 -),应该这样写:

import UserDiv from "$lib/components/UserDiv.svelte";
英文:

import { UserDiv } from ... is wrong, as it is a named import. Components are exported from Svelte files as the default export.

So if there are not other issues (- error does not sound like an import issue, though -) that should be:

import UserDiv from "$lib/components/UserDiv.svelte";

huangapple
  • 本文由 发表于 2023年8月8日 22:07:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76860349.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定