{"record":{"id":"826f74c4828f25b7","repo":"withastro/astro","slug":"error-invalid-hydration-directive-key-suppo","errorCode":null,"errorMessage":"Error: invalid hydration directive \"${key}\". Supported hydration methods: ${hydrationMethods}","messagePattern":"Error: invalid hydration directive \"(.+?)\"\\. Supported hydration methods: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/astro/src/runtime/server/hydration.ts","lineNumber":86,"sourceCode":"\t\t\t\t}\n\t\t\t\t// This is a special prop added to prove that the client hydration method\n\t\t\t\t// was added statically.\n\t\t\t\tcase 'client:component-hydration': {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tcase 'client:display-name': {\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tdefault: {\n\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)) {","sourceCodeStart":68,"sourceCodeEnd":104,"githubUrl":"https://github.com/withastro/astro/blob/d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca/packages/astro/src/runtime/server/hydration.ts#L68-L104","documentation":"During prop extraction for a component, Astro encountered a `client:` attribute whose directive (the part after the colon) is not in the registered `clientDirectives` set. The built-in supported set is `load`, `idle`, `visible`, `media`, `only` (plus the internal `display-name`). Any other value is rejected at render time.","triggerScenarios":"A typo in the directive (`client:visble`, `client:idel`); an experimental/custom directive that was never registered; using a directive from a newer/older Astro version that the current install doesn't ship.","commonSituations":"Spelling mistakes on hydration directives; assuming a directive like `client:scroll` or `client:intersection` exists; copying example code from docs for a different Astro version.","solutions":["Correct the directive to one of the supported methods listed in the error message (`client:load`, `client:idle`, `client:visible`, `client:media`, `client:only`).","Check for the exact spelling and casing (directives are lowercase).","If you need a custom directive, register it via the `clientDirectives` integration hook before using it."],"exampleFix":"// before\n<Counter client:visble />\n\n// after\n<Counter client:visible />","handlingStrategy":"validation","validationCode":"const SUPPORTED = new Set(['load', 'idle', 'visible', 'media', 'only']);\nfunction assertDirective(attr: string): void {\n  const name = attr.slice('client:'.length);\n  if (!SUPPORTED.has(name)) {\n    throw new Error(`Unsupported client directive: client:${name}`);\n  }\n}","typeGuard":"const isClientDirective = (attr: string): boolean =>\n  SUPPORTED.has(attr.split(':')[1]);","tryCatchPattern":null,"preventionTips":["Type-check directive strings against the supported set in component prop types.","Run `astro check`/lint to catch attribute typos.","Keep a shared constant of supported directives for tooling."],"tags":["hydration","directives","typo","render"],"backgroundTag":null,"analyzedSha":"d081033d5fe8e8a68c4bbbad4af9d2deb9c74bca","analyzedAt":"2026-08-12T13:37:29.035Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}