Sveltekit 无法在 iOS 上运行 JavaScript

Question

我有sveltekit website ，(打开网站时“正在收集日志...”必须在 5 秒内更改为“👍复制日志📋”，否则 JavaScript 不得运行)。

由于某种原因，svelte 无法在 iOS 上正确运行我的网站，经过一些反馈(来自用户)，我得出的结论是 JavaScript 根本无法在 iOS 浏览器中运行。我没有“mac”或“iPhone”，因此无法向您展示控制台。网站在 Android 和 Windows 上完美运行。我在这里缺少一些配置吗？

我做了很多研究，到目前为止我发现的一切都是死胡同。 sveltekit 就是这样吗？如果是这样，那么我应该使用 Next.js 吗？

src/routes/debug/+page.svelte

<script lang="ts">
    // ... code
</script>
{#await new Promise((res) => setTimeout(res, 5000))}
    <button disabled class="-bg-base2 bg-opacity-50 px-2 py-1 w-full mt-3">
        Collecting logs...
    </button>
{:then _}
    <button class="-bg-base2 px-2 py-1 w-full mt-3" on:click={copyLogs}> 👍 Copy Logs 📋 </button>
{/await}
<!-- <MyUI /> -->

package.json

{
    "name": "survey-site",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --check . && eslint .",
        "format": "prettier --write ."
    },
    "devDependencies": {
        "@fontsource/merriweather": "^4.5.14",
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "@types/chart.js": "^2.9.37",
        "@typescript-eslint/eslint-plugin": "^5.27.0",
        "@typescript-eslint/parser": "^5.27.0",
        "autoprefixer": "^10.4.8",
        "chart.js": "^3.9.1",
        "eslint": "^8.16.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^4.0.0",
        "postcss": "^8.4.16",
        "prettier": "^2.6.2",
        "prettier-plugin-svelte": "^2.7.0",
        "svelte": "^3.44.0",
        "svelte-check": "^2.7.1",
        "svelte-preprocess": "^4.10.7",
        "tailwindcss": "^3.1.8",
        "tslib": "^2.3.1",
        "typescript": "^4.7.4",
        "vite": "^3.0.4"
    },
    "type": "module",
    "dependencies": {
        "firebase": "^9.9.4",
        "svelte-drawer-component": "^1.2.2"
    }
}

svelte.config.js

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;

vite.config.ts

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

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

export default config;

Answer 1

我在 GitHub 上找到了您的存储库并发现了问题 - 以下表达式在 Safari 中引发错误。这不是 SvelteKit 错误，而是您的代码问题:

new Date(new Date().toString() + ' UTC'); // returns "Invalid Date"
new Date(new Date().toString() + ' UTC').toISOString().substring(0, 16); // throws "RangeError: Invalid Date"

我不确定 Safari 在这里抛出错误是否正确(即规范是否允许)，但无论哪种方式，它都不会在 Safari 中工作。

由于此代码引发异常，您的组件无法成功水合，您只能看到服务器端渲染的输出(“收集日志...”永远不会更新)。

根据您想要执行的操作，您也许可以使用一些内置的 Date UTC methods instead .