标签: sveltekit

我尝试使用 +page.js 文件中的 load() 函数来获取数据，该函数在页面初始加载后工作正常。但是，如果我刷新页面（或更改代码并自动刷新），则会出现错误：“500 内部错误”。

我可以导航到页面上的另一条路线，然后返回此页面，它会再次工作。

+页面.js：

export async function load() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts');
    const books = await res.json();

    return {
        books
    }
}

+页面.svelte：

<script>
    export let data
    let id = parseInt(new URLSearchParams(window.location.search).get('id')) - 1
</script>

<h2>{data.books[id].title}</h2>
<p>{data.books[id].body}</p>

我究竟做错了什么？

我正在尝试创建一个将在 SvelteKit 应用程序中运行的简单 WebSocket 服务器。我在网上找到了这个教程，它展示了如何使用 Socket.io 来完成此操作，但是我想改用该ws模块。

这是vite.config.ts我迄今为止提出的文件：

import type { UserConfig } from 'vite';

import { sveltekit } from '@sveltejs/kit/vite';

import { WebSocketServer } from "ws";

const webSocketServer = {
    name: "webSocketServer",
    configureServer: () => {
        const webSocketServer = new WebSocketServer({
            port: 8080
        });
    
        webSocketServer.on("connection", (socket, request) => {
            socket.on("message", (data, isBinary) => {
                console.log(`Recieved ${data}`);
            });
        
            socket.send("test from server");
        });
    }
}

const config: UserConfig = {
    plugins: [sveltekit(), webSocketServer]
};

export …

我正在使用 SvelteKit，并且我的页面上有一个表单。由于我需要在发送数据之前对其进行操作，因此我无法使用 SvelteKit 的默认表单提交行为（使用action属性）。

因此，根据文档的这一部分，我使用了一个简单的事件侦听器，然后使用了该fetch函数：

async function handleSubmit(e:Event) {
  const formData = new FormData(e.target as HTMLFormElement);
  // ... doing some stuff here
  const res = await fetch("?/login", { /* plenty of stuff there */ });
}

./+page.server.ts因此将执行名为“login”的操作。

我有一个简单的问题：如果我想执行默认操作，并且知道当前页面位于 slug 中，我应该写什么路径（在 中）。fetch

我写吗fetch("?/")？（不起作用）

我写fetch("?"）吗？（不起作用）

显然我可以直接命名它并解决问题。我只是想知道是否有解决方案以及是否有人考虑过这个问题。

我非常困惑为什么当我运行npm run buid它时它说它正在编译所有内容但它不生成 public 或 dist 文件夹。我能够使用 来开发和预览一切npm run dev。网上的所有内容都说只需运行此命令，它就会生成文件。

 npm run build      \n\n> svlt-drag@0.0.1 build\n> vite build\n\n\nvite v4.1.4 building SSR bundle for production...\n\xe2\x9c\x93 51 modules transformed.\n5:06:18\xe2\x80\xafPM [vite-plugin-svelte] ssr compile done.\npackage         files     time     avg\nsvlt-drag           4   31.5ms   7.9ms\n@sveltejs/kit       1   13.1ms  13.1ms\n\nvite v4.1.4 building for production...\n\xe2\x9c\x93 42 modules transformed.\n5:06:19\xe2\x80\xafPM [vite-plugin-svelte] dom compile done.\npackage     files     time     avg\nsvlt-drag       5   62.0ms  12.4ms\n.svelte-kit/output/client/_app/version.json                                 0.03 kB\n.svelte-kit/output/client/vite-manifest.json                                2.73 kB\n.svelte-kit/output/client/_app/immutable/assets/_layout.ed6dad0e.css        9.13 kB \xe2\x94\x82 gzip: 2.48 kB\n.svelte-kit/output/client/_app/immutable/chunks/2.6b2094ff.js               0.08 kB \xe2\x94\x82 gzip: 0.10 kB\n.svelte-kit/output/client/_app/immutable/chunks/1.4e7307ad.js               0.08 kB …

看起来，goto在 SvelteKit 中，当指示重定向到当前网页时，它没有执行任何操作：

<script>
    import { goto, invalidate } from '$app/navigation';

    function reloadPage() {
        const thisPage = window.location.pathname;
        console.log('goto ' + thisPage);
        goto(thisPage);
    }
</script>

<button on:click={() => reloadPage()}>
    Reload
</button>

另外，我尝试过invalidate、 以及invalidate后面加一个goto，以及goto添加假查询参数，但都不会导致页面刷新。

我可以让它工作的唯一方法是通过调用location.reload()，但这将绕过 SvelteKit 的客户端路由并返回到服务器，通过网络重新加载整个应用程序。

我正在开发一个 SvelteKit 项目，并且有一堆 vite.config 文件：

ll vite.config.*

输出：

.rw-rw-r-- 1.3k sas 30 May 19:49 vite.config.ts
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977000-d9424581b6c6.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977001-6954a6ac5ac19.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977001-9201cfcc774c9.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977001-ad78163483ceb.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977007-4c080a380ebd9.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977007-4cf3e5ed6cf92.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977007-a642b2ba2f4cd.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977007-bcfada510dd4.mjs
.rw-rw-r-- 5.3k sas 19 Jun 18:09 vite.config.ts.timestamp-1687208977007-d88f9fb0e8e01.mjs
.rw-rw-r-- 5.3k …

我有一个简单的表格，其中包含电子邮件、密码和确认密码。我用行动来处理这个问题。我想实现一个将触发以下操作的微调器

1. 检查用户当前是否存在于数据库中
2. 如果没有，则继续注册

我正在使用口袋底座

以下是我的行动。

import { superValidate } from 'sveltekit-superforms/server';
import { redirect } from '@sveltejs/kit';
import { fail } from '@sveltejs/kit';

import { loginSchema } from '$lib/schema/zodschema';
import { ClientResponseError } from 'pocketbase';

export const load = async () => {
    const form = await superValidate(loginSchema);
    return { form };
};

export const actions = {
    default: async ({ locals, request }) => {
        const form = await superValidate(request, loginSchema);


        try {

            const { email } = form.data …

我正在使用 SvelteKit 构建一个网站。截至目前，我通过将 Bootstrap 5 添加到 SvelteKit Skeleton 项目提供的 app.html 文件中来将其包含在我的项目中：

<!-- Bootstrap styles and javascript --> 
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

现在，当使用引导模块构建站点时，npm run build不再加载。

我刚刚创建了一个新的 sveltekit 应用程序，安装了 flowbite 组件库和 flowbite-svelte-icons 并开始编写一些代码，但是当我检查我的应用程序时，localhost: 5173我看到的是以下消息：

ReferenceError: Request is not defined
    at getRequest (file:///home/emmy/Documents/dev/public/water_watch/frontend/water_watch/node_modules/.pnpm/@sveltejs+kit@2.0.4_@sveltejs+vite-plugin-svelte@3.0.1_svelte@4.2.8_vite@5.0.10/node_modules/@sveltejs/kit/src/exports/node/index.js:101:2)
    at file:///home/emmy/Documents/dev/public/water_watch/frontend/water_watch/node_modules/.pnpm/@sveltejs+kit@2.0.4_@sveltejs+vite-plugin-svelte@3.0.1_svelte@4.2.8_vite@5.0.10/node_modules/@sveltejs/kit/src/exports/vite/dev/index.js:475:27
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

真正奇怪的是，我什至在我的终端上看不到它，它只在浏览器上看到。

我不明白，所以我删除了我编写的所有代码，直到它只是创建项目时的默认内容，但我仍然收到相同的错误消息。

我想将 PouchDB 与 SvelteKit 一起使用。我已将 pouchdb-7.2.1.js 复制到 SvelteKit 中的/src/libd 并将其重命名为 pouchdb.js。Pouchdb 应该在浏览器中运行。因此我使用 ssr=false 来抑制服务器端渲染。我在导入语句中遇到第一个错误。这是我的第一个非常短的页面 (couchdb.svelte)：

<script context="module">
    export const ssr = false;
</script>

<script>
    import PouchDB from '$lib/pouchdb.js'; 
</script>

我收到错误 500

import not found: PouchDB

我尝试了很多不同的版本，但都没有成功。例如：

import PouchDB from 'pouchdb-browser';  (After npm i pouchdb-browser)
import PouchDB from 'pouchdb';          (After npm i pouchdb)

使用 pouchdb 的正确方法是什么？