Fix: Missing Hint on client:only Directive in Astro

What Causes This Error?

This error occurs when you use the client:only directive without specifying which framework renderer to use. Unlike other client directives, client:only requires a hint because the component is never rendered on the server.

The Problem

---
import Chart from '../components/Chart.jsx';
---

<!-- ❌ Missing framework hint -->
<Chart client:only />

The Fix

Specify the Framework

---
import Chart from '../components/Chart.jsx';
---

<!-- ✅ Specify "react" as the renderer -->
<Chart client:only="react" />

Framework Hints

---
// React components
import ReactComponent from './ReactComponent.jsx';
---
<ReactComponent client:only="react" />

---
// Vue components
import VueComponent from './VueComponent.vue';
---
<VueComponent client:only="vue" />

---
// Svelte components
import SvelteComponent from './SvelteComponent.svelte';
---
<SvelteComponent client:only="svelte" />

---
// Solid components
import SolidComponent from './SolidComponent.jsx';
---
<SolidComponent client:only="solid-js" />

---
// Preact components
import PreactComponent from './PreactComponent.jsx';
---
<PreactComponent client:only="preact" />

Common Scenarios

Browser-Only Libraries

---
// Component using browser APIs like canvas or WebGL
import ThreeScene from '../components/ThreeScene.jsx';
---

<!-- ✅ Skip SSR for browser-only code -->
<ThreeScene client:only="react" />

Window/Document Dependencies

---
// Component that accesses window or document
import Analytics from '../components/Analytics.jsx';
---

<!-- ✅ Only render on client -->
<Analytics client:only="react" />

Third-Party Widgets

---
// External widgets that don't support SSR
import MapWidget from '../components/MapWidget.vue';
---

<MapWidget client:only="vue" />

Why client:only Needs a Hint

---
// Regular client directives - Astro can detect framework from server render
import Button from './Button.jsx';
---
<Button client:load />  <!-- Framework detected during SSR -->

---
// client:only - No SSR, so framework must be specified
import Chart from './Chart.jsx';
---
<Chart client:only="react" />  <!-- Must specify framework -->

Multiple Frameworks

---
import ReactChart from './ReactChart.jsx';
import VueMap from './VueMap.vue';
---

<!-- Specify correct framework for each -->
<ReactChart client:only="react" />
<VueMap client:only="vue" />

Common Framework Identifiers

Framework	Hint Value
React	"react"
Vue	"vue"
Svelte	"svelte"
Solid	"solid-js"
Preact	"preact"
Lit	"lit"

Quick Checklist

• client:only always requires a framework hint
• Use exact framework name: "react", "vue", "svelte", etc.
• Component won’t render during SSR (blank until JS loads)
• Use for browser-only APIs (canvas, WebGL, localStorage)
• Ensure the framework integration is installed