Skip to content

fix(core): hydrated node assertion in production #12551

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

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

Timsonrobl
Copy link

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

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

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

  • Yes
  • No

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

The PR fulfills these requirements:

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

Timsonrobl commented Jun 4, 2022

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.

@posva
Copy link
Member

posva commented Jun 4, 2022

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

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

Successfully merging this pull request may close these issues.

2 participants