SvelteKit apps do not work in the Steam in-game overlay browser

[StevenStavrakis]

Describe the bug

Various parts of svelte applications do not work in the Steam in-game overlay browser.

Several apps I've tested fail to hydrate correctly with and without kit.

The svelte-4 demo app navigation does not work. I have tested on both Windows and Mac.

It's inconsistent, as the sveltekit docs seem to work fine. It's extremely difficult to debug as the browser provides no developer tools, and there are many possible user agents.

I am building something that needs to work in the overlay browser, so this is fully blocking.

Reproduction

1. Create a new svelte-4 demo application by running npm create svelte@latest and selecting the "demo app" option
2. Open it in the Steam overlay browser
3. Attempt to use as normal

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 378.89 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - ~/.nvm/versions/node/v21.2.0/bin/node
    npm: 10.2.5 - ~/.nvm/versions/node/v21.2.0/bin/npm
    pnpm: 8.12.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 120.0.6099.129
    Safari: 16.5.1
  npmPackages:
    svelte: ^4.2.7 => 4.2.8

Severity

blocking all usage of svelte

[StevenStavrakis]

I have also tested an Astro app with svelte components and am experiencing similar issues.
I tested the Qwik demo app and it seemed to work perfectly fine.

[dummdidumm]

"Create a new svelte-4 demo application" what exactly do you mean by that? Which template / scaffolding CLI are you using for this?

[StevenStavrakis]

Sorry, I meant using the npm create svelte@latest command. Will edit OP.

[StevenStavrakis]

After some testing, the error appeared for Chrome 91 and earlier. The issue is resolved as of Chrome 92 and onward.

I can't do further testing since the service I was using provided only a minute. Can anyone comment on the likelihood that this issue will be fixed? I'm happy to do more testing to find a way forward if there is one.

[Conduitry]

From what I can tell, the error is arising from the use of https://caniuse.com/mdn-javascript_builtins_array_at in the Sverdle portion of the demo app. I confirmed this by running the demo site in BrowserStack, and according to caniuse this would also align with your observation that it is broken in 91 and works in 92.

As far as adjusting the demo app to not use this syntax goes, I'm not sure that's worthwhile. I do think there's an argument for not using it in SvelteKit's browser runtime code, but as far as I can tell, it's already not being used there. (See also #6082.)

What's causing your particular app to break may or may not be Array.prototype.at. I don't know what other APIs were introduced in Chrome 92. If you're using that in your app (or any other API that's not supported by the browsers you need to support), then you'll need to rewrite that code. If the issue is arising from some other syntax used within Svelte's or SvelteKit's runtime, then we can have a discussion about whether it makes sense to avoid using that syntax on our end.

[StevenStavrakis]

Awesome, thanks for taking a look. I might have to pony up for some more time on browserstack to actually debug. I'll check out my code and see if I'm using any unavailable browser features, but I know for sure I haven't used Array.at() directly. I'm using shadcn-svelte which could be causing the issue. Maybe I can polyfill?

It's unlikely that SvelteKit's runtime is the perpetrator as some sites seem to work totally fine.

[StevenStavrakis]

Looks like it's the same issue here. Not sure how to debug an issue like this. :|

[StevenStavrakis]

Trying to polyfill with @vitejs/plugin-legacy and am running into a Sveltekit build error:

[StevenStavrakis]

Appears to be related to: sveltejs/kit#3247

[StevenStavrakis]

After further testing and Googling, I'm finding that there doesn't appear to be a way to polyfill sveltekit as plugin-legacy hasn't worked with sveltekit for quite some time.

I'm really, really hoping there is some sort of fix floating around for this that I don't know about. Or that I'm mistaken about this situation, but it appears that I simply cannot use Svelte for my project.

[dummdidumm]

ERR_SVELTE_HYDRATION_MISMATCH sounds like you chose Svelte 5. What happens if you use Svelte 4?

[StevenStavrakis]

I haven't tried converting my entire app to svelte 4 yet. As per @Conduitry, svelte-4 sverdle has the same error with .at.

[StevenStavrakis]

Without a polyfill is there any way I can move forward with my project?

[david-plugge]

Probably not, but creating a polyfill for .at isn't that difficult (assuming you don't need other polyfills)

[StevenStavrakis]

Would I need to make a vite plugin for that? I know how to write a polyfill but I'm not fluent in build tools.

[Conduitry]

If it's just a polyfill you think you need rather than transpilation, you could just stick the code somewhere it's going to get run early - for example in another <script> tag in your app.html.

[david-plugge]

Something like this in your app.html should do the trick

<script>
  Array.prototype.at = function (index) {
    return index < 0 ? this[this.length + index] : this[index];
  };
</script>

You could even check if Array.prototype.at is a function before applying the polyfill

[StevenStavrakis]

In a world full of frameworks, sometimes I forget that I can just write code.
I ended up with this:

<!doctype html>
<html lang="en" class="dark">

<head>
	<meta charset="utf-8" />
	<link rel="icon" href="%sveltekit.assets%/favicon.png" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	%sveltekit.head%
	<script>
		if (!Array.prototype.at) {
			Array.prototype.at = function (index) {
				if (index < 0) {
					index = this.length + index;
				}
				return this[index];
			};
		}
	</script>
</head>

<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
</body>

</html>

And it seems to be working at a basic level now. I'll have to go through and edit my code to make it work with Chrome 85, so it's still unfortunate that the base vite polyfill plugin isn't compatible with SvelteKit, but at least it works. Probably can't use some CSS features, etc.

If anyone runs into a similar-ish issue, note that on Chrome 84 and below the ||= operator doesn't work and your code will require transpilation.