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.

Sign up for GitHub

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

Jump to bottom

hydrateOnVisible() throws an error if the component does not render an element #11952

Closed
angelov-a opened this issue Sep 17, 2024 · 1 comment · Fixed by #11954
Closed

hydrateOnVisible() throws an error if the component does not render an element #11952

angelov-a opened this issue Sep 17, 2024 · 1 comment · Fixed by #11954
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope:hydration

Comments

@angelov-a
Copy link

Vue version

3.5.6

Link to minimal reproduction

https://play.vuejs.org/#__PROD____SSR__eNqdU01v2zAM/SuELknRzBnQbYfMCdYNPWQYlmIrdhIwODadqFUoQ5LzscD/fZTcpN6WpsAOBizxUXzke9yL66pK1jWKkUhdblXlwaGvK9AZLcZSeCfFRJJaVcZ62IPFEgZQYKkIr92O8k+GQ4TkB7DcFTbzOKMfyqm5xs7NtNAIDZTWrKDH5XqSJOWGnIcv2a/djBDGJ1/t7yUBaJMVaEfQv4DxBFoy/V4yfMwNDfQuBgH5WHH0D5n+haSGv27Zu43577Kce7Zs6PhQMx22o+VB8sHjqtKM4RNAemh/5JZmwwMvM+1QiuFTNLAMx3TYyRQDloY7KdUiuXeGWL9IWYqce1Aa7azyijuVYgQxEmKZ1mbzOd55W2OkHnOWmD+cuL9323Anxa1Fh3bNxI4xn9kF+jZ88/0rbvn/GFyZotaMPhP8hs7oOnBsYR9r4pHZDi6yncapK1rcuZutR3KHpgLRgGwiXgoWI8j3XOtPdK+SNzGPteEpdiz0wg60Prm1pnJpfDYoNoK5MRozFraZBL3PaV2oNaxfqZLfDLnx1cAucIiAISNOKN3x298cY5k/trO7Ze8Pbs9NTZ69zoD+65dZ8s/BeZypC5gj2wqhJvYBb4hTa4TNEgmm5NGyNfIw8dk8msRCaexxr/3Smg1kBGitsQmXm9feG4IPuVb5A88ikru8lELSZL9vqTZNOmxxk+fn8pNrBT/wUK6St8k70fwGbwKnOA==

Steps to reproduce

  1. Run the provided link in SSR mode
  2. Observe the error: Uncaught (in promise) TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

What is expected?

The error is handled.

What is actually happening?

If there are other lazy-hydrated components in the same view, they may become unresponsive.

I was not able to reproduce the unresponsiveness of the sibling component in StackBlitz, but it breaks in our project where we have a chain of nested lazily-hydrated components, along with some render function components in the middle.

System Info

No response

Any additional comments?

No response
@edison1105 edison1105 added scope: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels Sep 17, 2024
@edison1105
Copy link
Member

PR welcome!

@linzhe141 linzhe141 mentioned this issue Sep 17, 2024
Merged
@github-actions github-actions bot locked and limited conversation to collaborators Oct 5, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. scope:hydration
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(hydration): avoid observing non-Element node linzhe141/vue3-core-fork
2 participants
@edison1105 @angelov-a