Dynamic routing with client-only components (Unable to find matching import statement for client:only component)

[tschaub]

What version of astro are you using?

1.9.0

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

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

I'm hoping to use Astro to build a documentation site for a library of client-only React components. The documentation site will have a large number of examples, and ideally MDX could be used for each example source (providing a title, description, and JSX for the example). I was envisioning being able to do SSG rendering for each of the example pages with minimal HTML content (e.g. title and description) and then have the client-only portion of the example render only on the client.

The dynamic page routing example in the docs provides what looks like a good starting place for this. Unfortunately, if I add a client:only directive to the <Content /> component, I get an error like this:

[plugin:astro:build] Unable to find matching import statement for client:only component
/home/projects/github-ynahew/src/pages/examples/[slug].astro:23:4
21 |    <p>{frontmatter.description}</p>
22 |  
23 |    <Content client:only="react" />
   |      ^
24 |  </div>
25 |

I understand this to mean that the client:only directive can only be used with statically imported components. So I imagine this is not really a bug. If anything, perhaps this could be added to the client:only directive documentation.

If there is a way to do dynamic routing to pages with client-only components, I would be happy to create a pull request with an example for the documentation. Alternatively, I could create a pull request making the limitation clearer for client:only.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-ynahew?file=src/pages/examples/[slug].astro

Participation

• [X] I am willing to submit a pull request for this issue.

[bluwy]

If I'm not wrong, the Content component is sort of an Astro component, so client:only doesn't make sense there beside the error message given. I guess we could document this though.

[matthewp]

I think we can just close this, client: does not work on Astro components and is already documented.