vue icon indicating copy to clipboard operation
vue copied to clipboard

fix(core): hydrated node assertion in production

Open Timsonrobl opened this issue 1 year ago • 2 comments

What kind of change does this PR introduce? (check at least one)

  • [X] Bugfix
  • [ ] Feature
  • [ ] Code style update
  • [ ] Refactor
  • [ ] Build-related changes
  • [ ] Other, please describe:

Does this PR introduce a breaking change? (check one)

  • [ ] Yes
  • [X] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

  • [X] It's submitted to the dev branch for v2.x (or to a previous version branch), not the master branch
  • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
  • [X] All tests are passing: https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup
  • [ ] New/updated tests are included

If adding a new feature, the PR's description includes:

  • [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information: The tag name and type of hydration candidate nodes are currently checked only in development mode, for some reason. This causes instability in production mode as TEXT type node can be chosen as hydration target for ELEMENT type node if there is a DOM structure mismatch, which can cause app crash when hydration process tries to access .appendChild() method non existing in text node throwing an unhandled exception and making the whole app unresponsive.

Timsonrobl avatar Jun 03 '22 21:06 Timsonrobl

Any hints on how to make reproduction would be appreciated. Is there any sandbox with SSR out there?

Basically you need to make a render function that renders conditionally: On the server:

<div>Text node</div>

On the client:

<div>
  <a>Text node</a>
</div>

and it should crash the Vue instance during hydration in production mode.

You can also Google " Nuxt Failed to execute 'appendChild' on 'Node': This node type does not support this method." and most of the results would be symptoms of this bug. Also lots of issues in the Nuxt repo for this search query.

Timsonrobl avatar Jun 04 '22 12:06 Timsonrobl

It’s normal for the app to crash. You are supposed to catch that kind of bug during development. The check is removed for perf reasons

posva avatar Jun 04 '22 17:06 posva