{"record":{"id":"d2f03a4d86ed22b7","repo":"withastro/astro","slug":"missingmediaquerydirective","errorCode":"MissingMediaQueryDirective","errorMessage":"Media query not provided for `client:media` directive. A media query similar to `client:media=\"(max-width: 600px)\"` must be provided.","messagePattern":"Media query not provided for `client:media` directive\\. A media query similar to `client:media=\"\\(max-width: 600px\\)\"` must be provided\\.","errorType":"exception","errorClass":"AstroError","httpStatus":null,"severity":"error","filePath":"packages/astro/src/runtime/server/hydration.ts","lineNumber":96,"sourceCode":"\t\t\t\t\textracted.hydration.directive = key.split(':')[1];\n\t\t\t\t\textracted.hydration.value = value;\n\n\t\t\t\t\t// throw an error if an invalid hydration directive was provided\n\t\t\t\t\tif (!clientDirectives.has(extracted.hydration.directive)) {\n\t\t\t\t\t\tconst hydrationMethods = Array.from(clientDirectives.keys())\n\t\t\t\t\t\t\t.map((d) => `client:${d}`)\n\t\t\t\t\t\t\t.join(', ');\n\t\t\t\t\t\tthrow new Error(\n\t\t\t\t\t\t\t`Error: invalid hydration directive \"${key}\". Supported hydration methods: ${hydrationMethods}`,\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\t// throw an error if the query wasn't provided for client:media\n\t\t\t\t\tif (\n\t\t\t\t\t\textracted.hydration.directive === 'media' &&\n\t\t\t\t\t\ttypeof extracted.hydration.value !== 'string'\n\t\t\t\t\t) {\n\t\t\t\t\t\tthrow new AstroError(AstroErrorData.MissingMediaQueryDirective);\n\t\t\t\t\t}\n\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\textracted.props[key] = value;\n\t\t\tif (!transitionDirectivesToCopyOnIsland.includes(key)) {\n\t\t\t\textracted.propsWithoutTransitionAttributes[key] = value;\n\t\t\t}\n\t\t}\n\t}\n\tfor (const sym of Object.getOwnPropertySymbols(inputProps)) {\n\t\textracted.props[sym] = inputProps[sym];\n\t\textracted.propsWithoutTransitionAttributes[sym] = inputProps[sym];\n\t}\n\n\treturn extracted;","sourceCodeStart":78,"sourceCodeEnd":114,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/astro/src/runtime/server/hydration.ts#L78-L114","documentation":"The `client:media` directive requires a CSS media query as its value (the directive stores `value` from the attribute). When `extractDirectives` sees `directive === 'media'` and the extracted value is not a string (missing or empty attribute), it throws `MissingMediaQueryDirective`. Astro needs the query to decide when to hydrate.","triggerScenarios":"`<Comp client:media />` with no attribute value; `<Comp client:media=\"\" />` with an empty string; a boolean-coerced attribute where the value resolves to non-string.","commonSituations":"Forgetting the query argument; assuming `client:media` hydrates at a default breakpoint; copy-paste that dropped the quoted query.","solutions":["Provide a valid CSS media query string: `client:media=\"(max-width: 600px)\"`.","Confirm the value is quoted so Astro parses it as a string, not a boolean attribute."],"exampleFix":"// before\n<Counter client:media />\n\n// after\n<Counter client:media=\"(max-width: 600px)\" />","handlingStrategy":"validation","validationCode":"function assertMediaQuery(value: unknown): asserts value is string {\n  if (typeof value !== 'string' || value.length === 0) {\n    throw new Error('client:media requires a non-empty media query string');\n  }\n}","typeGuard":"const hasMediaQuery = (v: unknown): v is string => typeof v === 'string' && v.length > 0;","tryCatchPattern":null,"preventionTips":["Always pass a quoted media query to `client:media`.","Treat `client:media` values as required, not optional."],"tags":["hydration","client-media","directives","render"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}