标签: sveltekit

我正在使用 Sveltekit 和 Typescript。在$lib文件夹中，我有一个api.ts文件。

登录后，我正在写入 JWT 令牌session并想在文件中使用它api.ts。但我收到错误。

我正在关注这个例子： sveltejs / realworld

// login.svelte

import { session } from "$app/stores";

// After login...

$session.accessToken = response.accessToken;

// api.ts

import { session } from "$app/stores";

// Before sending request...

if ($session.accessToken) {
    // Add Bearer token to header...
}

错误：Cannot find name '$session'. Did you mean 'session'?ts(2552)

为什么这个$session东西在文件中有效.svelte，但在.ts文件中却不起作用？

我怎样才能从accessToken访问？session.ts

谢谢。

编辑

api.ts代码： …

在 svelte kit 组件样式标签中使用 tailwind 响应类（例如：md:my-auto、focus:ring-0、focus:outline-none）时，出现以下错误：

500

Semicolon or block is expected

ParseError: Semicolon or block is expected
    at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)
    at Object.read_style [as read] (/var/www/html/node_modules/svelte/compiler.js:13141:21)
    at tag (/var/www/html/node_modules/svelte/compiler.js:15887:34)
    at new Parser$1 (/var/www/html/node_modules/svelte/compiler.js:16787:22)
    at parse$3 (/var/www/html/node_modules/svelte/compiler.js:16919:21)
    at compile (/var/www/html/node_modules/svelte/compiler.js:30012:18)
    at compileSvelte (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:244:48)
    at async TransformContext.transform (/var/www/html/node_modules/@sveltejs/vite-plugin-svelte/dist/index.js:837:27)
    at async Object.transform (/var/www/html/node_modules/vite/dist/node/chunks/dep-6b5f3ba8.js:44285:30)

这是我的组件的代码：

500

Semicolon or block is expected

ParseError: Semicolon or block is expected
    at error (/var/www/html/node_modules/svelte/compiler.js:16752:20)
    at Parser$1.error (/var/www/html/node_modules/svelte/compiler.js:16828:10)
    at Object.read_style …

我按照sveltkit 中的标准教程为基本模板创建了 Typescript 项目。

我想使用Material Web Component Button。

我npm install @material/mwc-button。

然后我只需将以下内容添加到routes/index.svelte

<script>
    import "@material/mwc-button";
</script>

我得到了SyntaxError: Cannot use import statement outside a module。

这让我发疯，因为这是我的要求的第一步，而这是被困住的第三周。我什至不知道从哪里开始。这是vite问题、sveltekit问题、mwc问题吗？任何建议都会很棒。

我有兴趣捕获用户首次提交到我的网站时的互联网协议 (IP) 地址。我的印象是 SvelteKit 提交与其他 Node.js 服务器解决方案类似。

我一直在关注这篇文章，但我没有看到任何远程类似的东西req.headers['x-forwarded-for']，或者req.socket.remoteAddress在我的请求中没有看到任何东西提交到 SvelteKit 中的 API 服务器。

以下是我在请求中看到的内容（通过 API 提交中的控制台日志）：

arg1:
    body: (... data ... )
    Headers:
        accept:'*/*'
        accept-encoding:'gzip, deflate'
        accept-language:'en-US,en;q=0.9'
        connection:'keep-alive'
        content-length:'141'
        content-type:'text/plain;charset=UTF-8'
        cookie:'userid=c03efd10-3085-46cb-bacd-9eaeb605426e'
        host:'192.168.1.22:3000'
        origin:'http://192.168.1.22:3000'
        referer:'http://192.168.1.22:3000/learn'
        user-agent:'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36'
    locals:
        userid: '....'
    method: 'POST'
    params: {}
    path: '/api/user_form'
    query: ...
    rawBody: ... 

绝对不行socket，没有标题['x-forwarded-for']

请注意，我正在本地网络上进行此操作。主机位于同一网络中的一台计算机上，客户端位于另一台计算机上。事实上，主机= 192.168.1.22:3000，客户端= 192.168.1.4

注意2，我正在通过以下方式运行程序svelte-kit dev --host 0.0.0.0

我没看到什么？有没有办法使用 Sveltekit 从网络提交中获取客户端用户的 …

我知道 SvelteKit 仍处于测试阶段并且发生了很大变化，但我仍然想询问如何让 TypeORM 与 SvelteKit 开发服务器和生产节点服务器一起使用。

我使用基本的 SvelteKit 项目（使用）和 TypeORM（使用此处的安装说明）创建了一个最小的存储库。npm init svelte@next

当我尝试这样做时，我收到一条未正确导入的npm run dev --警告：import-metadata

reflect-metadata doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

然后我从 TypeORM 得到一个异常：

[vite] Error when evaluating SSR module /src/lib/User.ts:
ColumnTypeUndefinedError: Column type for User#id is …

我正在尝试使用 TailwindCSS 和 SvelteKit 编写一个应用程序，该应用程序在底层使用 ViteJS，在编码时我意识到我内部的Header组件在更改时./src/components/common/Header.svelte不会热重载。无论对组件的更改有多大或多小，Svelte 都不会显示它们，直到我在控制台中终止脚本并重新运行npm run dev。

正常的行为是整个页面随着页面以外的组件的更改而更新。

请注意，添加和删除对任何路由的更改都会立即可见，但组件保持不变。

一段时间后，这个问题变得非常烦人，我尝试在 TailwindCSS 和svelte.config.js（不是 Svelte-Kit 中的 .cjs 文件）文件中找到修复程序。

在搜索了大量答案后，我找不到任何有效的方法。

这种行为很奇怪，因为在我从事的其他使用 TailwindCSS 和 Svelte-kit 相同架构的项目中，HMR 的工作方式就像一个魅力。

这是我的文件的代码Header.svelte和__layout.svelte

标题.svelte

<script>
</script>

<header>
    <!-- TEST HEADER -->
    <nav>
        <ul class="flex gap-5 bg-red-500">
            <!--These classes are tests and won't change the appearance of the Header unless I restart the script-->
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
            <!--Other random change that …

我在 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()
                    ]
                }
            }