标签: sveltekit

我正在尝试在 AWS Amplify 上部署我的 Svelte 应用程序，我推送提交，Amplify 构建并验证应用程序，但如果我访问应用程序 URL，它只是一个空白页面，这可能是适配器问题？我尝试了 node.js 和静态的，但没有成功

我目前hooks.ts在 SvelteKit 应用程序的文件中使用以下内容：

export async function handle({ event, resolve }) {
  console.log(event.locals) //<-- Works fine
}

我试图弄清楚如何在event和resolve参数上使用类型。据我所知，event工作原理如下：

import type { RequestEvent } from '@sveltejs/kit'

export async function handle(event: RequestEvent, resolve: ???){
  ...
}

但我不知道如何输入参数resolve。这里的文档显示了这一点：

export async function handle({ event, resolve }) {
  console.log(event.locals) //<-- Works fine
}

从我有限的 TypeScript 知识来看，它看起来像是resolve一个带有两个返回 Promise 的参数的函数。但是我如何在函数声明中写出它呢handle？

我一直在尝试使用 Svelte / Sveltekit 加载 sigma.js，但似乎没有组件集成，也没有任何关于如何执行此操作的指导。我尝试将其作为客户端代码加载到 Sveltekit 中，但没有成功，但我不知道这是否是合法的方法。Sigma.js 中是否有与 Sveltekit 一起运行的简单图表的工作示例？

我正在使用下面的 clickOutside 操作。

export function clickOutside(node: HTMLElement) {
 function detect({ target }: MouseEvent) {
   if (!node.contains(target as Node)) {
     node.dispatchEvent(new CustomEvent('clickoutside'));
    }
  }
   document.addEventListener('click', detect, { passive: true, capture: true });
   return {
     destroy() {
       document.removeEventListener('click', detect);
    },
  };

当我将鼠标悬停在：clickoutside={() => {}} 上时，我仍然遇到此错误

Type '{ onclickoutside: () => void; class: string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.
  Property 'onclickoutside' does not exist on type 'HTMLProps<HTMLDivElement>'}

我在 svelte 套件中尝试过这个app.d.ts

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    clickoutside?: (event: CustomEvent) …

2022 年 7 月 20 日 由 npm init svelte@next 创建的新 Sveltekit 项目。今天之前，所有 sveltekit 项目都在 localhost:3000 上以开发模式运行。当前项目在 localhost:5173 上运行，这使得它变得困难，因为 supabase 默认返回对 localhost:3000 的响应。我尝试更改 package.json，如https://www.cloudhadoop.com/svelte-change-port/所示 ，但没有成功。我尝试更改 Vite 服务器选项，如https://main.vitejs.dev/config/server-options.html#server-host中 所示，但这也不起作用。有没有人有一种万无一失的简单方法可以在 localhost:3000 上获取新的 Sveltekit 项目？非常感谢

我正在尝试让这个 fetch 方法在 Svelte 中工作

当 page.svelte 调用函数来获取数据时，在控制台中我收到此消息

[HTTP/1.1 405 Method Not Allowed 19ms]

我已经缩小到这个范围

POST method not allowed

我需要在配置文件中设置一个变量还是有另一个我缺少的解决方案？

// svelte.config.js

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

const config = {
    kit: {
        adapter: adapter(),
        methodOverride: {
            allowed: ['POST']
        },
    }
};

export default config;

这两个文件都位于 Routes 文件夹中

// 获取数据.js

export const POST = async(data) => {
  const response = // get data function here
  return {
    body: {
        data: response
    }
  }
}

// page.svelte

async function fetchData() {
   const …

在开发环境中是否可以使用 https 运行 SvelteKit 应用程序？\n我尝试运行

npm run dev -- --https  \n

vite启动服务器成功：

VITE v3.0.2  ready in 359 ms\n\n  \xe2\x9e\x9c  Local:   https://localhost:5173/\n  \xe2\x9e\x9c  Network: [...] \n

但我无法连接到 https://localhost:5173\nchrome 说：ERR_SSL_VERSION_OR_CIPHER_MISMATCH

我还尝试编辑 vite.config.js 添加我的证书：

https: {\n    key: readFileSync( `${__dirname}/../server/key.pem`),\n    cert: readFileSync(`${__dirname}/../server/cert.pem`),\n}\n

我还尝试在这篇文章之后使用 mkcert() ：

在本地主机上访问 https

但它会导致同样的错误

然后我尝试使用 mkcert 作为插件：

const config = {\n    \n    server: {       \n        https: true\n    },\n\n    plugins: [sveltekit(), mkcert()],\n\n}; \n

这次，在第一次加载时，它似乎可以工作，但是使用 SvelteKit goto() 加载其他页面会导致以下不同的错误：

TypeError …

我正在尝试将 sveltekit 应用程序从旧版本迁移到最新版本。会话已从 $app/stores 中删除。

我无法在当前文档中找到对新会话的引用。

我在 +layout.svelte 中使用此参考

    <script lang="ts">
        import { session } from '$app/stores';
    </script>

并从 hooks.ts 调用 GetSession：

    import type { GetSession, Handle } from '@sveltejs/kit';

引用它们的新方式是什么？

本.

如果我在 /routes 有一个主布局“+layout.svelte”，然后尝试在 /routes/auth/login 重置布局，它不起作用。

• 如果名称是“+layout.svelte”，则布局将嵌入主布局内。
• 如果名称是“+layout@.svelte”，则它不起作用。
• 如果名称是“+layout.reset.svelte”，则其： 错误：以 + 为前缀的文件被保留。

因为svelte/kit的默认配置是vite。我认为他们改变了它，但我不知道该怎么做。

我在文档中只能找到有关重置布局的内容。

位于：kit.svelte.dev/docs/advanced-routing#advanced-layouts-layout

使用 SvelteKit 时，必须始终在/store路径中创建，否则会出现刷新后状态保持最新的问题。 您无法在导入的模块中创建 ，因为服务器端模块仅加载一次，这会导致. 所有这些都导致了类型的某种情况。pagelayout
storestore

问题：

我创建商店并将其从 传递+page.svelte到Child.svelte，通过setContext：

<!-- +page.svelte -->
<script>
  import Child from "./Child.svelte";
  import { writable } from 'svelte/store';
  import { setContext } from "svelte";
  
  function createCount() {
    /** @type {import("svelte/store").Writable<number>} */
    const { subscribe, set, update } = writable(0);
    
    return {
      subscribe,
      increment: () => update(n => n + 1),
      decrement: () => update(n => n - 1),
      reset: () => set(0)
    }; …