Fix: Missing Value for client:media Directive in Astro - Astro Error Fix

What Causes This Error?

This error occurs when you use the client:media directive without providing a media query string. The directive requires a CSS media query to determine when the component should hydrate.

The Problem

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

<!-- ❌ Missing media query value -->
<Sidebar client:media />

<!-- ❌ Empty string -->
<Sidebar client:media="" />

The Fix

Provide Media Query

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

<!-- ✅ Hydrate only on desktop -->
<Sidebar client:media="(min-width: 768px)" />

Common Scenarios

Responsive Components

---
import DesktopNav from '../components/DesktopNav.jsx';
import MobileNav from '../components/MobileNav.jsx';
---

<!-- Only hydrate on larger screens -->
<DesktopNav client:media="(min-width: 1024px)" />

<!-- Only hydrate on mobile -->
<MobileNav client:media="(max-width: 1023px)" />

Reduced Motion Preference

---
import AnimatedHero from '../components/AnimatedHero.jsx';
import StaticHero from '../components/StaticHero.astro';
---

<!-- Only hydrate animations if user hasn't requested reduced motion -->
<AnimatedHero client:media="(prefers-reduced-motion: no-preference)" />

Dark Mode Components

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

<!-- Hydrate based on color scheme preference -->
<DarkModeToggle client:media="(prefers-color-scheme: dark)" />

Print vs Screen

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

<!-- Only hydrate for screen, not print -->
<InteractiveChart client:media="screen" />

Orientation-Based

---
import LandscapeGallery from '../components/Gallery.jsx';
---

<!-- Only hydrate in landscape mode -->
<LandscapeGallery client:media="(orientation: landscape)" />

Combining with Other Directives

---
import HeavyComponent from '../components/Heavy.jsx';
---

<!-- ❌ Can't combine client directives -->
<HeavyComponent client:media="(min-width: 768px)" client:visible />

<!-- ✅ Choose the most appropriate one -->
<HeavyComponent client:media="(min-width: 768px)" />

Valid Media Query Examples

<!-- Width-based -->
<Component client:media="(min-width: 640px)" />
<Component client:media="(max-width: 1024px)" />
<Component client:media="(min-width: 768px) and (max-width: 1024px)" />

<!-- Feature-based -->
<Component client:media="(hover: hover)" />
<Component client:media="(pointer: fine)" />

<!-- Preference-based -->
<Component client:media="(prefers-color-scheme: dark)" />
<Component client:media="(prefers-reduced-motion: reduce)" />
<Component client:media="(prefers-contrast: high)" />

<!-- Display-based -->
<Component client:media="screen" />
<Component client:media="print" />

Quick Checklist

client:media requires a media query string
Use valid CSS media query syntax
Component hydrates when media query matches
Cannot combine with other client:* directives
Use for responsive/conditional hydration