SvelteKit not working on mobile phone default browser (non chrome) but Svelte only is working.

[niwasmala]

Describe the bug

SvelteKit not working property on mobile default browser (non chrome), and working as expected on chrome. Svelte still working on same device & browser. So I think the problem is in svelte-kit, but I still don't know the exact issue. Any guidance?

Is there any way to make it work since my user mostly using their default browser without installing chrome? Perhaps install some polyfills needed?

This is a real blocker to use svelte kit since I can't force all users to use chrome and not using their default browser.

Reproduction

https://github.com/niwasmala/sveltekit-bug-mobile-default-browser

This is the steps i take to create sveltekit reproduction

1. npm init svelte@next my-app
2. cd my-app
3. yarn install
4. Edit src/routes/index.svelte as mentioned below
5. yarn dev

https://github.com/niwasmala/svelte-working-on-mobile-default-browser

And this is step I take to create svelte repro

1. npx degit sveltejs/template my-svelte-project
2. cd my-svelte-project
3. yarn install
4. Edit src/App.svelte as mentioned below
5. yarn dev

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
    Memory: 7.46 GB / 15.88 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - ~\node_modules\.bin\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.19041.423.0
    Internet Explorer: 11.0.19041.1
  Mobile Phone:
    Device: Vivo 1807
    OS: Android 8.1
    Browser: Default Browser (non chrome)

Severity

blocking all usage of SvelteKit

Additional Information

Svelte Kit Repro

Source code: src/routes/index.svelte

<script>
	import { browser } from '$app/env';
	import { onMount } from 'svelte';

	let name = 'hello';
	let isBrowser = false;

	onMount(() => {
		name = 'world';
		isBrowser = true;
	});
</script>

<h1>Welcome to {name}</h1>
{browser} {isBrowser}

Expected: After mounting, display "Welcome to world", browser true, and isBrowser = true
Actual: display "Welcome to hello", browser false, and isBrowser = false

Svelte

Source code: src/App.svelte

<script>
	import { onMount } from 'svelte';

	export let name;

	onMount(() => {
		name = 'hello';
	})
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

Working as expected. After mounting, display "Hello hello"

[rmunn]

I see the device is a Vivo 1807 using the device's default browser. Is it possible that the browser is blocking Javascript somehow? Because that's exactly what I'd expect to see if Javascript is disabled (and, in fact, I can reproduce those results in Firefox on Linux by just turning off Javascript and reloading the page). The server-side rendering will produce "Welcome to hello", and once the client has loaded it, the Javascript code will change "hello" to "world". But if Javascript is disabled, then none of the client-side code runs.

Could you check whether Javascript is somehow disabled by default on the device? If turning Javascript on makes the site run correctly, then this isn't a Svelte-Kit bug. Svelte-Kit is designed so that you can server pages to browsers that have Javascript disabled (see the "todos" example in the Svelte-Kit demo project), but you do have to design your pages around the fact that you expect browsers to turn off Javascript. It's not a bug when client-side code fails to run in a browser with Javascript disabled.

[Conduitry]

If that's not what the problem is, then this sounds like a duplicate of #12.

[niwasmala]

Will check immediately is the browser blocking javascript.

But if the browser is blocking the javascript, svelte-only repo should display hello world, since name is set from src/main.js, isn't it?

[niwasmala]

I'm changing src/app.html

<body>
	<div id="svelte">%svelte.body%</div>
	<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
	</noscript>
	<script>
		alert('javascript is running');
	</script>
</body>

It display the alert, and then it display "Welcome to hello", so the javascript should be running right? If you need any things need to clarify, feel free to tell me.

[theurgi]

I can report a similar experience.

I currently have a SvelteKit app that's running on both the dev server using dev --host and deployed on vercel for testing. I'm visiting the app on multiple iOS devices using multiple browsers: mobile: firefox, chrome, brave, safari; desktop: firefox and brave.

Everything works as expected on desktop browsers. However on every mobile browser I've tried, some props are updated when data is fetched (and the view re-renders) while others are not.

[Rich-Harris]

I'm willing to bet this is a duplicate of #12, so I'll close this