🐛 BUG: client:only errors @ React & Vue

[Enteleform]

What version of astro are you using?

1.0.0-beta.14

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

None

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. 

Additional context @ Discord/#support-threads/enteleform(2022-04-20)

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.

[tony-sull]

Looks like the same issue as #2662, closing this as a duplicate and I'll add a note to that issue that Vue hits a similar warning 👍

[Enteleform]

Reopened @ #3362.