Sveltekit not running JavaScript on iOS

Question

I have sveltekit website , (on opening the site "Collecting logs..." must change to " Copy Logs " in 5sec, if not then JavaScript must not be running).

For some reason svelte is not running my website correctly on iOS, after some feedback (from users), I concluded JavaScript is not running at all in iOS browsers. I don't have "mac" or "iPhone", so can't show you the console. Site runs perfectly on Android & Windows. Am I missing some configuration here?

I did lot of research, and everything I found so far was a dead end. Is this how it will be with sveltekit, if so then should I will use Next.js then?

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

I was able to find your repo on GitHub and found the issue - the following expressions throw an error in Safari. This is not a SvelteKit bug, but an issue with your code:

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

I'm not sure whether Safari is right to throw an error here or not (ie whether the spec permits it), but either way it's not going to work in Safari.

Because this code throws an exception, your component is unable to successfully hydrate and you only see the server-side-rendered output ("Collecting logs..." never updates).

Depending on what you're trying to do, you may be able to use some of the built-in Date UTC methods instead .