Sveltekit 未在 iOS 上運行 JavaScript

Question

我有sveltekit 網站，（打開網站“收集日志...”必須在 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 中工作。

由於此代碼拋出異常，您的組件無法成功混合，您只能看到服務器端呈現的 output（“正在收集日志...”從不更新）。

根據您嘗試執行的操作，您也許可以使用一些內置的Date UTC 方法來代替。