{"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/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/astro/src/runtime/server/hydration.ts#L78-L114","documentation":"The client:media directive needs a CSS media query as its value so the island knows when to hydrate. During directive extraction, if the directive is 'media' and the extracted value is not a string (bare attribute gives true, or the expression evaluates to a boolean/number/undefined), Astro throws MissingMediaQueryDirective with an example query.","triggerScenarios":"Writing <Comp client:media /> with no value; passing a variable like client:media={isMobile} where isMobile is a boolean; a dynamic value that evaluates to undefined at render time.","commonSituations":"Assuming client:media takes a boolean toggle like some component libraries' props; wiring the directive to reactive state instead of a literal query string; template code copied from a media-query example that lost its quotes.","solutions":["Provide a media query string: client:media=\"(max-width: 600px)\"","If the value is dynamic, ensure the expression resolves to a string query, e.g. client:media={widthQuery}","If you actually want always/never hydration semantics, use client:load or omit the directive instead"],"exampleFix":"// before\n<Chart client:media={isMobile} />\n\n// after\n<Chart client:media=\"(max-width: 600px)\" />","handlingStrategy":"validation","validationCode":"// keep media queries as literal strings\n<Chart client:media=\"(max-width: 600px)\" />;\n// when dynamic, validate first\nif (typeof query !== 'string' || query.length === 0) throw new Error('client:media needs a query string');","typeGuard":"function isMediaQueryString(value: unknown): value is string {\n  return typeof value === 'string' && value.trim().length > 0;\n}","tryCatchPattern":null,"preventionTips":["Always quote the query: client:media=\"(max-width: 600px)\"","Never pass booleans or numbers to client:media","For dynamic queries, derive the string from state (e.g. media={table of queries}) and type it as string"],"tags":["astro","hydration","client-media","directive"],"backgroundTag":"missing-directive-value","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":"2026-08-18T18:48:03.901Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}