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

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

Create a new svelte-4 demo application by running npm create svelte@latest and selecting the “demo app” option
Open it in the Steam overlay browser
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

About this issue

Original URL
State: closed
Created 6 months ago
Comments: 18 (4 by maintainers)

Most upvoted comments

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.

StevenStavrakis on Jan 8, 2024