{"record":{"id":"5ed53972fd297adf","repo":"withastro/astro","slug":"you-are-attempting-to-render-node-name-clie","errorCode":null,"errorMessage":"You are attempting to render <${node.name!} ${clientAttribute.name} />, but ${node.name!} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.","messagePattern":"You are attempting to render <(.+?) (.+?) />, but (.+?) is an Astro component\\. Astro components do not render in the client and should not have a hydration directive\\. Please use a framework component for client rendering\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/integrations/mdx/src/rehype-analyze-astro-metadata.ts","lineNumber":62,"sourceCode":"\t\t\t// From this point onwards, `node` is confirmed to be an island component\n\n\t\t\t// Match this component with its import source\n\t\t\tconst matchedImport = findMatchingImport(tagName, imports);\n\t\t\tif (!matchedImport) {\n\t\t\t\tthrow new AstroError(\n\t\t\t\t\tAstroErrorData.NoMatchingImport.message(node.name!),\n\t\t\t\t\tAstroErrorData.NoMatchingImport.hint,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t// If this is an Astro component, that means the `client:` directive is misused as it doesn't\n\t\t\t// work on Astro components as it's server-side only. Warn the user about this.\n\t\t\tif (matchedImport.path.endsWith('.astro')) {\n\t\t\t\tconst clientAttribute = node.attributes.find(\n\t\t\t\t\t(attr) => attr.type === 'mdxJsxAttribute' && attr.name.startsWith('client:'),\n\t\t\t\t) as MdxJsxAttribute | undefined;\n\t\t\t\tif (clientAttribute) {\n\t\t\t\t\tconsole.warn(\n\t\t\t\t\t\t`You are attempting to render <${node.name!} ${\n\t\t\t\t\t\t\tclientAttribute.name\n\t\t\t\t\t\t} />, but ${node.name!} is an Astro component. Astro components do not render in the client and should not have a hydration directive. Please use a framework component for client rendering.`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tconst resolvedPath = resolvePath(matchedImport.path, file.path);\n\n\t\t\tif (hasClientOnlyDirective(node)) {\n\t\t\t\t// Add this component to the metadata\n\t\t\t\tmetadata.clientOnlyComponents.push({\n\t\t\t\t\texportName: matchedImport.name,\n\t\t\t\t\tlocalName: '',\n\t\t\t\t\tspecifier: tagName,\n\t\t\t\t\tresolvedPath,\n\t\t\t\t});\n\t\t\t\t// Mutate node with additional island attributes","sourceCodeStart":44,"sourceCodeEnd":80,"githubUrl":"https://github.com/withastro/astro/blob/52e6c34790cc8ac4e69e6135ace06049867e5c4a/packages/integrations/mdx/src/rehype-analyze-astro-metadata.ts#L44-L80","documentation":"While compiling .mdx files, the rehype-analyze-astro-metadata pass resolves each JSX element to its import. When the import path ends in .astro and the element carries any mdxJsxAttribute whose name starts with client:, the compiler warns that Astro components are server-side only — a hydration directive on them cannot work and should be removed or moved to a framework component.","triggerScenarios":"In an .mdx file: `import Card from './Card.astro'` followed by `<Card client:load />` (any client:* attribute). Emitted at compile time, once per offending element, via console.warn during the rehype pass.","commonSituations":"Docs/content sites authoring in MDX with .astro components; copy-pasting hydration directives from framework component usage; prototyping interactivity by slapping client: on whatever component is at hand.","solutions":["Remove the client:* attribute from the .astro component usage","Extract the interactive part into a framework component (React/Svelte/Vue/Solid) and place the client:* directive on that instead","Reconsider whether the component needs client JS at all — most .astro components render static HTML"],"exampleFix":"# before  src/content/docs/guide.mdx\nimport Card from '../../components/Card.astro';\nimport Like from '../../components/Like.svelte';\n<Card client:load title=\"Hello\" />\n\n# after\n<Card title=\"Hello\">\n  <Like client:load />\n</Card>","handlingStrategy":"type-guard","validationCode":"# CI review aid: list every client: directive in MDX content for manual check\n# against imports — flag ones whose component comes from a .astro file\ngrep -rn --include='*.mdx' 'client:' src/content","typeGuard":"const isAstroComponentFactory = (c: unknown): c is () => any =>\n  typeof c === 'function' &&\n  (c as { isAstroComponentFactory?: boolean }).isAstroComponentFactory === true;\n\n// in dynamic JSX: only attach client:* when the component is NOT an Astro factory\nconst props = isAstroComponentFactory(Comp) ? rest : { ...rest, 'client:load': true };","tryCatchPattern":null,"preventionTips":["In MDX, attach client:* only to framework component imports","Review every grep hit for `client:` in content PRs","Keep .astro components presentational; put islands in framework files"],"tags":["mdx","hydration","client-directive","astro-components","compile-time"],"backgroundTag":"hydration-directive-on-server-component","analyzedSha":"52e6c34790cc8ac4e69e6135ace06049867e5c4a","analyzedAt":"2026-08-18T18:48:03.901Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}