标签: sveltekit

我有一个 SvelteKit 项目，由于某种原因，./$types没有 PageLoad 模块（其他项目也有。我不确定我做了/没有做什么才没有它。这是我收到的错误：

Module '"./$types"' has no exported member 'PageLoad'.ts(2305)

这就是我使用它的方式（用于测试）：

import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, fetch }) => {
  console.log('props from +page.ts: ', params.db_item)
  // We fetch the post here using a Worker/Lambda
  return params.db_item
}

这是我的 package.json 文件：

{
    "name": "test",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "playwright …

从 Sveltekit 操作返回的 json 是乱码。我期待这样的事情：

{ foo: bar, foo2: bar2 }

但我得到的是这个：

Array({ foo: 1, foo2: 2 }, bar, bar2)

对于嵌套数据来说，这更令人烦恼。

这就是我发送的方式：

const response = await fetch('/api/fetch', {
  method: 'POST'
}).then((res) => {
  res.json().then((r) => {
    console.log(JSON.parse(r.data))
  })
})

这是api/fetch/+page.server.js

export const actions = {
  default: async ({ request }) => {
    const response = await fetch(
      'https://exterual-url-that-returns-json', {
        method: 'GET'
      }
    )
    return await response.json()
  }
}

即使 json 对象不是从外部 url 获取的，我也有同样的问题，即return { foo: bar, foo2: bar2 …

我正在尝试官方 SvelteKit 示例https://realworld.svelte.dev/。
其代码托管在https://github.com/sveltejs/realworld

当我运行时登录并且一切正常npm run dev ，但是当我运行npm run dev -- --host时登录不起作用。

cookies.set('jwt', value, { path: '/' });

这不起作用，因此 cookie 未设置，因此登录不起作用。

使用选项时如何使登录正常工作--host？

我有一个 .env 文件，其中包含两个敏感项目和两个非敏感项目。运行 Sveltekit 1.0 并使用 Netlify Serverless 函数和 db-helper 文件，该文件具有

require('dotenv').config();
const dbName = process.env.MONGODB_DATABASE;

并类似地得到其他变量。然而，这会崩溃并出现错误“找不到模块‘dotenv’！”

我尝试过，同样的错误..

const dbName = import.meta.env.MONGODB_DATABASE

我尝试了 process.env['MONGODB_DATABASE'] 和 import.meta.env['MONGODB_DATABASE']。失败的。

我尝试使用 process.env 和 import.meta.env（带或不带 [' '] 包装器）为环境变量添加 VITE 前缀。失败的。

我读到您不必像 Vite 那样显式加载 dotenv。试过没有。失败的。

有人有解决这个问题的方法吗？

我正在使用 Ghost，我做了一个集成，我想从前端隐藏 api 密钥。我不相信我可以对 Ghost cms 设置限制（这也可以）。我确实相信 +page.js 文件也在浏览器上运行，所以我对如何实现这一点有点困惑？

我有一个 SvelteKit 组件，需要对应的+page.server.tscookie 验证表单操作。我的目标是拥有一个带有相应删除按钮的组件，该组件将从端点内的表单操作中向我的后端发送 API 请求+page.server.ts。

为了清楚起见，我的结构：

- src/
    - components/
        - Component/
            - +page.svelte
            - +page.server.ts
    - routes/
        - route/
            - +page.svelte

组件+page.svelte：

<div class="card">
    <form method="POST">
        <input type="hidden" value="{uuid}" name="uuid" />
        <button class="btn-icon variant-filled-primary">
            <span><Icon icon="material-symbols:delete-outline"></Icon></span>
        </button>
    </form>
</div>

组件+page.server.ts：

import type { Actions } from './$types';
 
export const actions = {
  default: async ({ cookies, request }) => {
    // Doing some http-only Cookie authenticated fetching and data processing here
  }
} satisfies …

我目前正在学习 Svelte 和 SvelteKit，到目前为止我很喜欢它。

然而，让我有点困惑的一件事是，什么时候应该使用表单操作，什么时候应该使用简单的on:submit处理程序？

是否有不同的用例？或者也许它们可以同时使用？如果我想向外部API发送JSON数据该怎么办？

感谢您的任何提示！

假设我想<a>在 Svelte/SvelteKit 中使用切换链接。例如：

<a on:click|preventDefault={_=>collapsed=!collapsed}>Toggle</a>

我从 VS Code 插件收到此警告：

A11y: <a> element should have an href attributesvelte(a11y-missing-attribute)

什么是合适的选择href？如果我尝试#或javascript:void(0)按照Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"? 中的建议进行操作 有人告诉我：

A11y: '#' is not a valid href attributesvelte(a11y-invalid-attribute)

在 SvelteKit 中，商店似乎在客户端和服务器端之间不同步。换句话说，如果在客户端修改了一个存储，那么当在服务器端检索它时，它就不会被修改，反之亦然。

您可以在下面的最小可重现示例中看到此行为：

https://stackblitz.com/edit/sveltejs-kit-template-default-fpp2y8?file=src/routes/+page.svelte

我的问题是：在客户端修改服务器端存储的惯用或正常方法是什么？

为了避免XY Problem，我具体尝试做的事情如下：

EPOS 系统的用户有一个“currentSale”商店，该商店在访问/epos服务器端的路由时加载，专门用于使Prisma可以获得有关产品、客户附加等的更多信息。

然而，例如，当用户尝试增加 EPOS 销售中的产品数量时，就会出现问题。尝试更新商店不起作用，因为它不会保存服务器端。使用整个 API 路径或表单操作似乎太过分了，而且不是优化/最佳的。

我最近handleFetch在 Sveltekit 中发现了这个钩子。现在我试图用它来拦截对我的后端的调用（用 Go 编写），但似乎不起作用（除非我错过了一些东西）。

文档内容如下：

此函数允许您修改（或替换）在服务器上运行的加载或操作函数内（或预渲染期间）发生的获取请求。

我有src\hooks.server.js：

/** @type {import('@sveltejs/kit').HandleFetch} */
export async function handleFetch({ request, fetch }) {
    console.log("HERE IN --------> HANDLE FETCH HOOK")

    return fetch(request);
}

正如您所看到的，我只是想通过在终端上打印消息来确保调用挂钩。

我有一个load函数src\routes\records\+page.server.js：

export async function load() {
    console.log("HERE IN LOAD")
    // const records = await getAllRecords(1, 10);
    const response = await fetch(`http://127.0.0.1:8080/api/v1/records?page=1&per_page=2`);
    const records = await response.json();
    console.log(await records);
    return records;
}

尽管我看到HERE IN LOAD消息和正在打印的响应，但我从未看到指示钩子被击中的消息。

我缺少什么？

谢谢