Sveltekit + Typescript：环境变量构建错误

Question

我想在我的 Sveltekit 应用程序中使用环境变量 - 它在开发服务器上运行良好，但我收到此构建错误：

Error: 'PUBLIC_KEY' is not exported by $env/static/public, imported by src/routes/+layout.svelte

Svelte 有这个模块可以帮助处理环境问题：https://kit.svelte.dev/docs/modules#$env-static-public

我有一个简单的 .env 文件，如下所示：

PUBLIC_KEY=123

现在 IDE 会抛出与构建错误相同的类型错误，但我可以通过将其添加到我的

types.d.ts

文件来修复该错误：

declare module '$env/static/public' {
    export const PUBLIC_KEY: string;
}

现在我的 IDE 中的类型错误消失了，为了进行测试，我只需将其添加到我的 +layout.svelte 文件中：

<script lang="ts">
    import { PUBLIC_KEY } from '$env/static/public';

</script>
<div>{ PUBLIC_KEY }</div>

内容 123 是在开发服务器上渲染的，所以它可以工作。但是，如果我运行

npm run build

，就会出现上面的错误。即使在导入上方放置

@ts-ignore

也没有帮助。 所以我的问题是：我需要做什么才能让 TS 一起玩？

Answer 1

我在该功能的 PR 评论中找到了答案。如果这在文档中就好了。

但是，对于那些面临该问题并登陆此处的人：您必须运行

svelte-kit sync

- 它将根据您的 .env 文件创建一个类型文件。 您可以使用

npm run check

- 这包括同步命令。

您不需要像我在问题中那样自己编写类型！只要跑

npm run check

。

Answer 2

Svelte 5 的快速修复

<script>
    import { env } from '$env/dynamic/public';
</script>

<main
    style:background={env.PUBLIC_THEME_BACKGROUND}
    style:color={env.PUBLIC_THEME_FOREGROUND}
>
    {env.PUBLIC_THEME_FOREGROUND} on {env.PUBLIC_THEME_BACKGROUND}
</main>

Answer 3

替代解决方案，检查您的环境变量是否以“PUBLIC”为前缀。如果是，您可以从模块“$env/static/public”导入它。如果没有，您可以从模块 '$env/static/private' 导入它