🐛 BUG: client:only doesn't work for some renderers

[Enteleform]

What version of astro are you using?

0.23.1

What package manager are you using?

Yarn

What operating system are you using?

Windows

Describe the Bug

Expected

Using either of the following will result in a successful render:

• client:only + jsxImportSource pragma
• client:only="renderer-name"

Actual

Error: Unable to render SolidCounter!

Using the `client:only` hydration strategy, Astro needs a hint to use the correct renderer.
Did you mean to pass <SolidCounter client:only="react|preact" />
  at Module.renderComponent (../../../src/runtime/server/index.ts:204:13)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)

Link to Minimal Reproducible Example

https://codesandbox.io/s/github/enteleform-codesandbox/0010--Astro--ClientOnly?file=/src/pages/index.astro:969-1055

[Enteleform]

Update

I just noticed this in the docs:

For custom renderers not provided by @astrojs, use the full name of the renderer provided in your Astro config, i.e. <client:only="my-custom-renderer" />.

 
During further debugging efforts, I tried the following:

1. client:only="solid-js"
2. client:only="solid"
3. client:only="@astrojs/renderer-solid"
    

---

 

Attempts [2, 3] do not exhibit the same issue as [1] as described in the original issue post. They no longer crash the dev server, however, they do not render properly. [<PreactCounter/>, <VueCounter/>] is rendered instead of the expected [<PreactCounter/>, <SolidCounter/>, <VueCounter/>].

Additionally, on an actual project with more complexity (dependencies, etc.), I encounter the following error with the same configuration:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'completed')
  at hydrate$1 (:3000/node_modules/.vite/chunk-3O2XGHMP.js?v=a0c9f002:323:44)
  at hydrate (:3000/node_modules/.vite/chunk-3O2XGHMP.js?v=a0c9f002:646:10)
  at :3000/node_modules/.vite/@astrojs_renderer-solid_client_js.js?v=a0c9f002:19:3
  at :3000/src/Pages/index.astro?html-proxy&index=1.js:4:39
  at onLoad (:3000/node_modules/.vite/astro_client_only_js.js?v=a0c9f002:22:5)

This error only occurs with client:only, client:visible renders properly.
 

---

 
My initial attempt [1] was using the alias solid-js as prescribed by docs/renderer-reference/#jsximportsource.

Could these names be refactored to use just one Solid alias for both @jsxImportSource & client:? Having to use [solid, solid-js] in different contexts seems like an avoidable point of confusion.

[forspamonly2]

same here in 0.24.3. with client:only loading solidjs component fails with Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'completed') in

function hydrate$1(code, element, options = {}) {
  sharedConfig.completed = globalThis._$HY.completed;

[forspamonly2]

still the same in 0.25.4

[Enteleform]

Forwarding this from #3154, similar issue confirmed wth react & vue:

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

[tony-sull]

Just confirmed locally that this reproduction now works in both dev and production in the latest Astro! Feel free to open a new issue if you run into a related bug, but I think we're all set!

Thank for such a clear reproduction here, made it very straight forward to confirm with the latest build 👏

[Enteleform]

Reopened @ #3362.

[Jay-Ferguson]

I'm still having this issue trying to use a react component using the client:only directive. While using the client:load directive their is an error about using browser API's, I am using Astro V4.04 and Astro/React 3.0.10