Astro Client Directive

[markomitranic]

Motivation

When a .astro component is enriched with a client: directive, the build will fail. In fact it will fail with a fairly unreadable error.

I would like to see a rule that would error when we attempt adding any client: directive to an Astro component, as that is illegal.

• This rule should not impact any non-astro components.
• This rule should be added to the recommended ruleset.

$ pnpm build

> test@0.0.1 build ~/test
> astro build

17:43:26 [content] Syncing content
17:43:26 [content] Synced content
17:43:26 [types] Generated 22ms
17:43:26 [build] output: "static"
17:43:26 [build] directory: /Users/markomitranic/Sites/test/dist/
17:43:26 [build] adapter: @astrojs/vercel
17:43:26 [build] Collecting build info...
17:43:26 [build] ✓ Completed in 32ms.
17:43:26 [build] Building static entrypoints...
17:43:26 [vite] ✓ built in 374ms
17:43:26 [build] ✓ Completed in 399ms.

 building client (vite) 
17:43:26 [vite] ✓ 0 modules transformed.
17:43:26 [ERROR] [vite] x Build failed in 5ms
transforming (1) astro-entry:/Users/markomitranic/Sites/pinkosensitivism[astro:build] The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '/Users/markomitranic/Sites/test/\x00astro-entry:/Users/markomitranic/Sites/test/src/components/tsconf...
file: astro-entry:/Users/markomitranic/Sites/test/src/components/Client.astro
  Stack trace:
    at Object.stat (node:fs:1664:16)
    at find (file:///Users/markomitranic/Sites/test/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:11394:2)
    at async loadTsconfigJsonForFile (file:///Users/markomitranic/Sites/test/node_modules/.pnpm/vite@6.1.0_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1/node_modules/vite/dist/node/chunks/dep-CfG9u7Cn.js:12475:38)
    at async compileAstro (file:///Users/markomitranic/Sites/test/node_modules/.pnpm/astro@5.2.5_@types+node@22.13.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.34.6_typescript@5.7.3/node_modules/astro/dist/vite-plugin-astro/compile.js:14:21)
    at async transform (file:///Users/markomitranic/Sites/test/node_modules/.pnpm/rollup@4.34.6/node_modules/rollup/dist/es/shared/node-entry.js:20698:16)
 ELIFECYCLE  Command failed with exit code 1.

Description

Components with .astro extension cannot be used on the client and are rendered as static HTML instead. If any client: directive is provided, Vite will attempt to bundle them, and the build will fail, as none of the client rendering integrations support Astro files.

This is a common mistake, usually happens when user intends to import a .tsx or .svelte file with the same module name.

Examples

---
import AstroClientComponent from "../components/AstroClientComponent.astro";
---

{/* ✓ GOOD */}
<AstroClientComponent />

{/* ✗ BAD */}
<AstroClientComponent client:load />

Additional comments

I've tried looking through existing rules and didn't find this one. :) I am unsure how this would be written tho, will look into it.

[ota-meshi]

Thank you for the rule proposal.
Sounds good to me. I'd love for you to submit a PR.

[markomitranic]

@ota-meshi thanks for a prompt response and a green light :)
I've never written an eslint rule, so this is a fun learning opportunity. I'll submit something in the following days.