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

🐛 BUG: client:only errors @ React, Vue, & Solid #3362

Closed
1 task
Enteleform opened this issue May 13, 2022 · 6 comments · Fixed by #3455
Closed
1 task

🐛 BUG: client:only errors @ React, Vue, & Solid #3362

Enteleform opened this issue May 13, 2022 · 6 comments · Fixed by #3455
Assignees
@tony-sull
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)

Comments

@Enteleform
Copy link
Contributor

Enteleform commented May 13, 2022 •
edited
Loading

What version of astro are you using?

1.0.0-beta.28

Are you using an SSR adapter? If so, which one?

No

What package manager are you using?

Yarn

What operating system are you using?

Windows

Describe the Bug

Steps to reproduce:

  • Clone the Kitchen Sink (Multiple Frameworks) template.
  • Change all instances of client:visible to client:only="..." @ src/pages/index.astro.

React Errors

• Warning: Expected server HTML to contain a matching <div> in <astro-root>.
• Warning: An error occurred during hydration. The server HTML was replaced with client content in <astro-root>.

Vue Errors

• [Vue warn]: Attempting to hydrate existing markup but container is empty. Performing full mount instead.

Solid Errors

  • Counter value is not rendered initially:
    image

Link to Minimal Reproducible Example

https://codesandbox.io/s/astro-client-directive-issues-82bu8s?file=/src/pages/index.astro:769-1214

Participation

  • I am willing to submit a pull request for this issue.
This was referenced May 13, 2022
Closed
Closed
@natemoo-re
Copy link
Member

natemoo-re commented May 13, 2022 •
edited
Loading

Ah dang, sorry this still isn't fixed! We'll take a look at this again.

cc @bholmesdev who authored #3337

@natemoo-re natemoo-re added - P4: important Violate documented behavior or significantly impacts performance (priority) s2-medium labels May 13, 2022
@JLarky
Copy link
Contributor

JLarky commented May 16, 2022

I had the same issue with React 17 and both client:only and client:idle that you can see here https://youtu.be/_y5hbSvVVAs?t=2282 and my workaround https://youtu.be/_y5hbSvVVAs?t=2555 was to just remove this check :) but I think the issue was that hyrdate function inside idle.js or only.js was not passing the third argument

@natemoo-re natemoo-re assigned natemoo-re and unassigned bholmesdev May 16, 2022
@joeldsouzax
Copy link

I have this error for client:* in solid-js. astro in dev mode is not able to find the component by path but works okay when built.

natemoo-re pushed a commit that referenced this issue May 26, 2022
fix(#3362): fix client:only behavior for React, Vue, Solid
194f08d
@natemoo-re natemoo-re linked a pull request May 26, 2022 that will close this issue
Improve nested and client:only hydration #3455
Merged
natemoo-re pushed a commit that referenced this issue May 26, 2022
fix(#3362): fix client:only behavior for React, Vue, Solid
d58e8cc
@natemoo-re natemoo-re mentioned this issue May 26, 2022
Merged
natemoo-re pushed a commit that referenced this issue May 27, 2022
fix(#3362): fix client:only behavior for React, Vue, Solid
ef76b4d
natemoo-re added a commit that referenced this issue May 31, 2022
@natemoo-re @matthewp
Improve nested and client:only hydration (#3455)
e9a77d8 
* wip: fix nested islands

* fix: improve hydration for dynamic content

* chore: fix bundle-size script for new files

* chore: allow-list client:* directive files

* fix(#3362): fix client:only behavior for React, Vue, Solid

* test: add client-only e2e test

* chore: update lockfile

* test: fix e2e tests

* test: add framework nesting e2e tests

* Update packages/astro/src/runtime/client/events.ts

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

* chore: add changeset

* fix(preact): ignore hydrate roots

* chore: remove `ssr` check in integrations

* Revert "chore: remove `ssr` check in integrations"

This reverts commit ba27eaa.

* chore: add changeset

Co-authored-by: Matthew Phillips <matthew@skypack.dev>
@Enteleform
Copy link
Contributor Author

Enteleform commented May 31, 2022 •
edited
Loading

Forwarding the updated repro from the Community Call (dependecy bump):
https://codesandbox.io/s/astro-client-directive-issues-forked-jvnhg3?file=/package.json

Fixed:

  • React
  • Vue
  • Solid

@matthewp
Copy link
Contributor

matthewp commented Jun 1, 2022

Thanks for the new reproduction.

@matthewp matthewp reopened this Jun 1, 2022
@FredKSchott FredKSchott assigned tony-sull and unassigned natemoo-re Jun 17, 2022
@tony-sull
Copy link
Contributor

Looks like this is fixed in the latest beta release, Stackblitz demo 🥳

We've made some huge strides the last few weeks in component hydration, both in performance improvements and in adding support for nested slots. Closing this as fixed but please open a fresh issue run into any related bugs!

SiriousHunter pushed a commit to SiriousHunter/astro that referenced this issue Feb 3, 2023
@natemoo-re @matthewp
Improve nested and client:only hydration (withastro#3455)
809100f 
* wip: fix nested islands

* fix: improve hydration for dynamic content

* chore: fix bundle-size script for new files

* chore: allow-list client:* directive files

* fix(withastro#3362): fix client:only behavior for React, Vue, Solid

* test: add client-only e2e test

* chore: update lockfile

* test: fix e2e tests

* test: add framework nesting e2e tests

* Update packages/astro/src/runtime/client/events.ts

Co-authored-by: Matthew Phillips <matthew@skypack.dev>

* chore: add changeset

* fix(preact): ignore hydrate roots

* chore: remove `ssr` check in integrations

* Revert "chore: remove `ssr` check in integrations"

This reverts commit ba27eaa.

* chore: add changeset

Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tony-sull tony-sull

Labels
- P4: important Violate documented behavior or significantly impacts performance (priority)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Improve nested and client:only hydration withastro/astro
7 participants
@JLarky @matthewp @natemoo-re @joeldsouzax @Enteleform @tony-sull @bholmesdev