Invalid hydration in IE11

[janvotava]

Describe the bug

IE11 is not hydrated correctly

Reproduction

https://github.com/janvotava/svelte-hydration-bug

Logs

No response

System Info

System:
    OS: macOS 12.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.75 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - /opt/homebrew/opt/node@16/bin/npm
    Watchman: 2021.12.20.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 97.1.34.80
    Chrome: 97.0.4692.99
    Chrome Canary: 99.0.4840.0
    Firefox: 96.0.1
    Safari: 15.3
    Safari Technology Preview: 15.4
  npmPackages:
    svelte: ^3.46.2 => 3.46.2

Severity

blocking all usage of svelte

[janvotava]

<ul> get's moved in front of 1

[janvotava]

Even minimal examples like this will break it

{#each [1] as item}
	{item}

	{#each [2] as item}
		{item}
	{/each}
{/each}

or even

<script>
let a = 1
let b = 2
</script>

{a}
{b}

after hydration will result in

[janvotava]

If I bisected correctly, it's not working since commit ecbd96a.

IE 11 does not have Text.prototype.parentElement.

It seems that using part of https://github.com/wessberg/node.parentelement polyfill fixes the problem.
Is it a bug or just something that should be added into the documentation? Using parentNode instead with an instanceof Element check would be an easy fix too.

[hyunbinseo]

@Mlocik97 Since Browser support (#558) is not closed yet, proposing such an issue seems valid.

@janvotava Since IE 11 is not supported out of the box, I do not think this is a bug or requires documentation.

If the only build setting that you used to target IE 11 is @vitejs/plugin-legacy, and if it was insufficient - requiring Node.parentElement polyfill, maybe this issue should be created in vitejs/vite.

Also, System Info should be updated to include specific Internet Explorer version in the Browsers section.

System Info

System:
    OS: macOS 12.2
    CPU: (10) arm64 Apple M1 Pro
    Memory: 1.75 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.2 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - /opt/homebrew/opt/node@16/bin/npm
    Watchman: 2021.12.20.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 97.1.34.80
    Chrome: 97.0.4692.99
    Chrome Canary: 99.0.4840.0
    Firefox: 96.0.1
    Safari: 15.3
    Safari Technology Preview: 15.4
  npmPackages:
    svelte: ^3.46.2 => 3.46.2

[janvotava]

Sadly IE11 is still used by a few of non tech-savvy users and still supported by Microsoft.

@vitejs/plugin-legacy just uses @babel/preset-env (which does not care about DOM) so I think it's out of their scope.

In the documentation, we have an info about supporting IE[9,10] during the compilation by passing legacy: true, maybe some little note about supporting IE11, so other's don't have to dig through the code like me would be a nice to have.

Also this was a breaking change during a minor semver update, although just for IE11 and I'm not sure if using Node.parentElement instead of Node.parentNode and checking if it's an Element will even save a lot of code in the runtime library?

[dummdidumm]

Closing as won't do - IE11 is dead.