clientOnlyDirectiveValues

Reports client:only directives without a value, or with a value whose type cannot be a renderer hint string.

✅ This rule is included in the astro logical presets.

Astro’s client:only directive needs a renderer hint such as "react" or "svelte". Without that value, or with a value that cannot be a string, Astro does not know which client runtime to load for the component.

This rule reports client:only directives that have no value. It also reports values whose type cannot possibly be a renderer hint string.

Examples

❌ Incorrect

---
import Widget from "./Widget.svelte";
---

<Widget client:only />

---
import Widget from "./Widget.svelte";

const renderer = 0;
---

<Widget client:only={renderer} />

✅ Correct

---
import Widget from "./Widget.svelte";
---

<Widget client:only="svelte" />

---
import Widget from "./Widget.svelte";

const renderer = getRenderer();

function getRenderer(): string {
  return "svelte";
}
---

<Widget client:only={renderer} />

Options

This rule is not configurable.

When Not To Use It

If your project intentionally passes non-string values to client:only before another transform rewrites them into renderer hints, this rule may be too strict. That usually means disabling the rule for the specific line or file and documenting where the final string renderer hint is introduced.

Further Reading

• Astro Docs: Template directives reference - client:only
• Astro Docs: Missing hint on client:only directive

Equivalents in Other Linters

• ESLint: astro/missing-client-only-directive-value