标签: sveltekit

我在 SvelteKit 中有一个加载函数。它获取一些数据。

有没有办法可以在加载函数解析之前显示加载程序？或者有一些 SSG 会在 SSR 解决后更新？任何可以让流程更加顺畅的方法，而不是无法向用户返回反馈......

<script context="module">
        export const async load = ({ fetch }) => {
            const response = await fetch('https://dog.ceo/api/breeds/image/random')
            return {
                data: await response.json()
            }
        }
</script>

<script>
        export let data;
</script>

<img src={data.message} alt="Dog image" />

我想要一个加载程序直到加载完成或一些默认数据值直到加载完成以获得更好的用户体验。我不想将其移至 onMount，因为我想在 SSR 上调用 api。

我正在寻找初始 CSR 的组合，直到 SSR 加载完成。我希望这也适用于初始加载，而不仅仅是在导航时。

使用@sveltejs/adapter-node: 1.0.0-next.61和@sveltejs/kit: ^1.0.0-next.225

以下问题仅发生在应用程序的构建版本上，而不会发生在开发服务器上，在开发服务器上不会发生此问题。

上传新文件时，我的应用程序不断返回关于这些新创建的文件的 404 错误，就好像该应用程序对这些文件视而不见。有趣的是，重新启动服务器时会发现所述图像。

创建请求成功：

该文件已在文件系统上正确创建，并且应该由页面加载，如 json 响应中所示，该响应列出了页面上要加载的所有文件：

然而，当尝试获取该文件时，服务器会返回 404 响应，尽管该文件的路径是正确的：

I\xe2\x80\x99ve 使用 Turborepo 创建了一个 monorepo，其中包含 2 个 SvelteKit 应用程序和 2 个包：一个组件库（也基于 SvelteKit）和一个配置包。

root\n|\n|- packages\n|   |- component-library\n|   `- config\n|\n`- apps\n    |- app1\n    `- app2\n

配置包包含 Tailwind 和 PostCSS 配置文件，它们在组件库和两个应用程序中使用。

我的问题是，从组件库导入的组件在app1中正确显示，但app2中的 Tailwind 类似乎存在问题。有些课程存在，但有些则不存在。I\xe2\x80\x99m 在 JIT 模式下使用 Tailwind。

使用的包的版本：

"turbo": "^1.2.4",\n"svelte": "^3.34.0",\n"@sveltejs/kit": "1.0.0-next.316",\n"tailwindcss": "3.0.23",\n

我\xe2\x80\x99m 甚至不确定这是否是因为 SvelteKit，但如果有人有类似 Turborepo-SvelteKit-Tailwind 设置的经验，我将不胜感激。

我使用适配器节点使用 vite 和 sveltekit 时遇到此构建错误

我不确定为什么它无法构建，因为它依赖节点来为客户端提供服务。

开发工作正常

'Buffer' is not exported by __vite-browser-external:buffer

我尝试了 polyfill，但它们不起作用。

            optimizeDeps: {
                esbuildOptions: {
                    // Node.js global to browser globalThis
                    define: {
                        global: 'globalThis'
                    },
                    // Enable esbuild polyfill plugins
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true,
                            buffer: true,
                            webworkers: true,
                        }),
                        NodeModulesPolyfillPlugin()
                    ]
                }
            },
            build: {
                minify: true,
                rollupOptions: {
                    plugins: [
                        // Enable rollup polyfills plugin
                        // used during production bundling
                        rollupNodePolyFill()
                    ]
                }
            }

我正在构建一个需要从任何来源访问 sveltkit 端点的嵌入。

如果我使用express，我会简单地使用cors中间件。

我很好奇是否有办法在 sveltkit 端点上启用 CORS，这样我就不需要启动另一个服务。

到目前为止我尝试过的一些事情：

• 从端点中的获取句柄返回“Access-Control-Allow-Origin”：“*”

• 覆盖 OPTIONS http 方法（似乎从未被调用）

• 我看到了这个reddit 帖子，但它似乎已经过时了。

我正在尝试使用此库抓取 LinkedIn 个人资料： https://www.npmjs.com/package/@nhn/linkedin-profile-scraper。这是我的代码：

<script>
import { LinkedInProfileScraper } from '@matidiaz/linkedin-profile-scraper';
    import { onMount } from 'svelte';
    import { session } from '$app/stores';

    onMount(async () => {
        const token = session?.provider_token;
    console.log(token);
        const scraper = new LinkedInProfileScraper({
            sessionCookieValue: token,
            keepAlive: false
        });

        // Prepare the scraper
        // Loading it in memory
        await scraper.setup();

        const result = await scraper.run('https://www.linkedin.com/in/jvandenaardweg/');

        console.log(result);
    });
</script>

我正在使用 sveltekit 来获取信息，有人可以指出如何解决这个问题，我在网上找不到太多信息。

我刚接触 Svelte，对基于道具的条件样式很感兴趣。我有两个 Svelte 组件 -Parent和Child，只是为了理解。

父级将 props 传递给子级 - 该pt属性应该是padding-top子级 css 的字段。代码Parent如下：

<script>
  import Child from "./Child.svelte";
</script>

<Child pt="45px" />

子组件有两种样式：padding-top和padding-bottom。根据传递的 props，创建相应的样式字段。如果没有传递任何 props，那么该组件将没有样式。在下面的示例中，我们仅传递pt激活padding-top字段的道具：

<script>
  export let pb, pt;
  let styles = "";
  if (pt) styles += "--pt:" + pt;
  if (pb) styles += "--pb:" + pb;
</script>

<div class="child" style={styles}>
  <h3>Hello</h3>
</div>

<style>
  .child {
    padding-top: var(--pt);
    padding-bottom: var(--pb);
  }
</style> …

我正在使用适配器节点检查 SvelteKit SSR 服务器的日志。

我已经自定义了server.js使用Express 而不是 Polka，但不确定这是否重要。

我认为，当fetch()尝试从后端 API 读取数据并由于某种原因失败时，会出现明显的错误。

这是我使用的控制台输出docker：

frontend  | TypeError: fetch failed
frontend  |     at fetch (file:///app/build/handler.js:17895:14)
frontend  |     at async Object.fetch (file:///app/build/server/index.js:2273:12)
frontend  |     at async fetch (file:///app/build/server/index.js:991:24)
frontend  |     at async Promise.all (index 0)
frontend  |     at async load (file:///app/build/server/chunks/6-0becfa88.js:8:56)
frontend  |     at async load_data (file:///app/build/server/index.js:1088:16)
frontend  |     at async file:///app/build/server/index.js:1887:18

该堆栈跟踪无法使用，因为它缺少调用的函数/源代码是什么的信息fetch()。不确定这是因为 Node.js / Express 的工作方式，还是因为堆栈的某些部分缺乏 TypeScript 源映射支持或其他原因。SvelteKit 项目有数十个被调用的函数，load()因为每个路由器端点都有这些函数。

有什么方法可以使这些错误以及 SvelteKit …

+页面.svelte

<form
    action="?/upload"
    method="post"
    enctype="multipart/form-data"
  >
<input
      type="file"
      name="file"
      id="file"
      accept="application/pdf"
    />

+页面.server.js

<form
    action="?/upload"
    method="post"
    enctype="multipart/form-data"
  >
<input
      type="file"
      name="file"
      id="file"
      accept="application/pdf"
    />

我还没有找到在 sveltkit 中处理文件上传的方法。有任何想法吗？文件很小..所以加载到内存没有问题。

我想在 +layout.svelte 中显示一个旋转器，而 +page.js 正在获取数据。使用下面的代码，在所有 api 调用完成之前，导航不可用。加载后我看到console.log。

有什么问题吗？如何正确显示加载状态？

+布局.svelte

<script>


  import { navigating } from '$app/stores';

  console.log(navigating)
</script>


  <main>
   
      {#if $navigating}
        <Spinner />
      {:else}
        <slot />
      {/if}
  
  </main>