Sapper: `<noscript><img src=...` in Svelte template loads image anyways

[freedmand]

Not sure if this is a Sapper-specific or a general Svelte issue. I have a Svelte template I call "LazyImage" that loads a detailed image asynchronously while presenting a low-res fallback initially. In case the user doesn't have JavaScript, I want to present the detailed image first. Within my template I have:

<noscript>
  <img src="...">
</noscript>

But when I run the Sapper site and navigate to the home page with JS enabled, the Network panel of Chrome dev tools shows the <noscript> images as loading. If I comment out the <noscript> part of my template, the image does not load (I'm sure of this because I've tried it with distinct images that are not loaded from the JS version). The <noscript> behavior works fine when JS is disabled.

I know Svelte compiles to JS, but since it's being server-side rendered, I'm curious if there is a good reason why the network is requesting the <noscript> version (maybe I'm missing something with my service worker or caching?). Any insights would be appreciated, and if this issue is specific to Svelte I'm happy to reopen there.

[EmilTholin]

Hi @freedmand! If you set hydratable: false in webpack.client.config.js the image is no longer loaded, so there seems to be an issue with svelte hydration of noscript.

[Rich-Harris]

Opened https://github.com/sveltejs/svelte/issues/1108 — I suspect the correct move here is to just ignore <noscript> altogether when generating client-side components

[Rich-Harris]

will close this in favour of https://github.com/sveltejs/svelte/issues/1108, since it's not a Sapper issue directly

[Rich-Harris]

This is fixed in Svelte 1.54.2