标签: sveltekit

我正在使用 构建一个网站SvelteKit，并使用 搭建网站pnpm create svelte。然而，当我跑步时pnpm build，出现以下错误：

vite v3.0.9 building for production...\n\xe2\x9c\x93 77 modules transformed.\n.svelte-kit/output/client/vite-manifest.json                                           2.96 KiB\n[vite-plugin-svelte-kit] Error running plugin hook writeBundle for vite-plugin-svelte-kit, expected a function hook.\nerror during build:\nError: Error running plugin hook closeBundle for vite-plugin-svelte-kit, expected a function hook.\n    at error (file:///home/leo/code/keo-website/node_modules/.pnpm/rollup@2.77.3/node_modules/rollup/dist/es/shared/rollup.js:1858:30)\n    at throwInvalidHookError (file:///home/leo/code/keo-website/node_modules/.pnpm/rollup@2.77.3/node_modules/rollup/dist/es/shared/rollup.js:22551:12)\n    at file:///home/leo/code/keo-website/node_modules/.pnpm/rollup@2.77.3/node_modules/rollup/dist/es/shared/rollup.js:22692:24\n    at async Promise.all (index 0)\n    at async Object.close (file:///home/leo/code/keo-website/node_modules/.pnpm/rollup@2.77.3/node_modules/rollup/dist/es/shared/rollup.js:23662:13)\n    at async Promise.all (index 0)\n    at async build (file:///home/leo/code/keo-website/node_modules/.pnpm/vite@3.0.9_sass@1.54.7/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:43473:13)\n    at async CAC.<anonymous> (file:///home/leo/code/keo-website/node_modules/.pnpm/vite@3.0.9_sass@1.54.7/node_modules/vite/dist/node/cli.js:747:9)\n\xe2\x80\x89ELIFECYCLE\xe2\x80\x89 Command failed with …

我正在使用 sveltekit goto 函数通过 on:click 在 div 上导航到页面。

clickHandler: (id: string) => goto(`/app/profile/${id}/settings/general-info`)

如何指定在新选项卡中打开页面，就像使用 CTRL + 单击一样？

下面，当我收到股票更新时，我尝试用流进行响应。

+页面.server.js：

import YahooFinanceTicker from "yahoo-finance-ticker";

const ticker = new YahooFinanceTicker();
const tickerListener = await ticker.subscribe(["BTC-USD"])

const stream = new ReadableStream({
  start(controller) {
    tickerListener.on("ticker", (ticker) => {
      console.log(ticker.price);
      controller.enqueue(ticker.price);
    });
  }
}); 

export async function load() {

    return response????
};

注意：YahooFinanceTicker 无法在浏览器中运行。

如何在 Sveltekit 加载函数中处理/设置响应。

我在 Netlify 上部署的 SvelteKit 应用程序遇到了一个问题，如果我加载该应用程序，然后让页面处于非活动状态几分钟，在某些时候它会中断，如果我尝试导航或执行某些操作，它就会卡住，而且看起来like 无法获取组件，但在某个时刻它最终会加载，但需要很长时间（例如几分钟）。所附的屏幕截图是我尝试通过单击按钮导航到页面后得到的。

这是 Sveltkit 配置：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        postcss: true
    }),

    kit: {
        adapter: adapter(),
    }
};

export default config;

有什么线索吗？

我有一个 Svelte（带有 Sveltekit）应用程序，我刚刚对其进行了容器化。它构建正确，运行时没有错误，但我无法从浏览器访问它。我尝试访问http://localhost:5050/，http://0.0.0.0:5050/但我得到：

This page isn\xe2\x80\x99t working\nlocalhost didn\xe2\x80\x99t send any data.\nERR_EMPTY_RESPONSE\n

这是Dockerfile我正在使用的：

# Our Node base image\nFROM node:19-alpine\n\n# Set the Node environment to development to ensure all packages are installed\nENV NODE_ENV development\n\n# Change our current working directory\nWORKDIR /app\n\n# Copy over `package.json` and lock files to optimize the build process\nCOPY  package.json package-lock.json ./\n# Install Node modules\nRUN npm install\n\n# Copy over rest of the project files\nCOPY . .\n\nRUN npm run build\n\n# Expose port\nENV …

在 SO 社区的帮助下，我终于能够对我的 Sveltekit 应用程序进行 docker 化并从浏览器访问它（这最初是一个问题）。到目前为止一切顺利，但现在每次我执行代码更改时，我都需要重新构建和重新部署我的容器，这显然是不可接受的。热重载不起作用，我一直在尝试在网上找到的多种方法，但到目前为止没有一个起作用。

这是我的Dockerfile：

FROM node:19-alpine

# Set the Node environment to development to ensure all packages are installed
ENV NODE_ENV development

# Change our current working directory
WORKDIR /app

# Copy over `package.json` and lock files to optimize the build process
COPY  package.json package-lock.json ./
# Install Node modules
RUN npm install

# Copy over rest of the project files
COPY . .

# Perhaps we need to build it for production, but …

我想child仅使用子布局渲染路线，而不继承根布局。

/routes/+layout.svelte
/routes/child/+layout.svelte
/routes/child/+page.svelte

我试图child/+layout@.svelte打破继承，但没有成功。我不想在父布局中使用布局组或 if-else 语句。

是否可以选择以优雅的方式打破父级继承？

如果我生成一个 sveltekit 应用程序骨架

npm create svelte@latest lineno
cd lineno
npm install

然后使用一个简单的处理程序创建一个钩子处理程序脚本，我自己会生成一个错误，我得到错误的行号（4而不是2）：

export const handle = async ({ event, resolve }) => {
  console.log(new Error("My error").stack)
  return await resolve(event);
}

export const handle = async ({ event, resolve }) => {
  console.log(new Error("My error").stack)
  return await resolve(event);
}

（有趣的是，正如人们所期望的那样，运行时捕获的实际代码错误会报告正确的行号。）

为什么创建新错误时的堆栈跟踪行号与代码中存在导致抛出错误的错误时的堆栈跟踪行号不同？有没有办法获得正确的行号？

我有以下增强的 SvelteKit 表单：

<script>
  import { enhance } from '$app/forms';
</script>

<form method="POST" use:enhance>
  <input name="name" />
</form>

成功提交后，表单将被重置。有什么办法可以避免这种情况吗？

在我的 SvelteKit 应用程序中，我有一个使用表单操作的表单：

<form action="/login?/logout" method="POST">
    <button type="submit">Logout</button>
</form>

在此操作中，最后一步是重定向：

export const actions: Actions = {
    logout: async (event) => {
        // ...
        throw redirect(307, '/login');
    }
}

这按我的预期进行。更新到 SvelteKit 1.0.0 后，行为发生了变化：该操作被调用（像以前一样），但在重定向时出现以下错误：

错误：未找到名称为“default”的操作

有什么想法需要改变或者应该如何做？