Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invalid hydration in IE11 #7175

Open
janvotava opened this issue Jan 23, 2022 · 6 comments
Open

Invalid hydration in IE11 #7175

janvotava opened this issue Jan 23, 2022 · 6 comments

Comments

@janvotava
Copy link

janvotava commented Jan 23, 2022

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
Copy link
Author

<ul> get's moved in front of 1

image

@janvotava
Copy link
Author

janvotava commented Jan 23, 2022

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

image

@janvotava
Copy link
Author

janvotava commented Jan 23, 2022

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

IE 11 does not have Text.prototype.parentElement.

image

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.

@janvotava janvotava changed the title Invalid hydration of nested trees in IE11 Invalid hydration in IE11 Jan 23, 2022
@Mlocik97

This comment has been minimized.

@hyunbinseo
Copy link
Contributor

@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
Copy link
Author

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants