Improving error messages for invalid client hydration directives (#2076)

* Adding check to make sure the hydration directive is valid

* remove temp debug logging

* Adding a check for media query with client:media + small refactor

* adding changeset

Co-authored-by: Tony Sullivan <tony.sullivan@hyperlab.se>

.changeset/two-geckos-rhyme.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Improving build validation and error messages for client hydration directives

packages/astro/src/runtime/server/hydration.ts

@@ -31,6 +31,8 @@ export function serializeProps(value: any) {
   });
 }
 
+const HydrationDirectives = ['load', 'idle', 'media', 'visible', 'only'];
+
 interface ExtractedProps {
   hydration: {
     directive: string;
@@ -70,6 +72,17 @@ export function extractDirectives(inputProps: Record<string | number, any>): Ext
         default: {
           extracted.hydration.directive = key.split(':')[1];
           extracted.hydration.value = value;
+
+          // throw an error if an invalid hydration directive was provided
+          if (HydrationDirectives.indexOf(extracted.hydration.directive) < 0) {
+            throw new Error(`Error: invalid hydration directive "${key}". Supported hydration methods: ${HydrationDirectives.map(d => `"client:${d}"`).join(', ')}`)
+          }
+
+          // throw an error if the query wasn't provided for client:media
+          if (extracted.hydration.directive === 'media' && typeof extracted.hydration.value !== 'string') {
+            throw new Error('Error: Media query must be provided for "client:media", similar to client:media="(max-width: 600px)"')
+          }
+
           break;
         }
       }

packages/astro/test/errors.test.js

@@ -50,6 +50,36 @@ describe('Error display', () => {
 
       // TODO: improve stacktrace
     });
+
+    it('hydration error', async () => {
+      if (isMacOS) return;
+
+      const res = await fixture.fetch('/astro-hydration-error');
+
+      // 500 returned
+      expect(res.status).to.equal(500);
+
+      // error message contains error
+      const body = await res.text();
+
+      // error message contains error
+      expect(body).to.include('Error: invalid hydration directive');
+    });
+
+    it('client:media error', async () => {
+      if (isMacOS) return;
+
+      const res = await fixture.fetch('/astro-client-media-error');
+
+      // 500 returned
+      expect(res.status).to.equal(500);
+
+      // error message contains error
+      const body = await res.text();
+
+      // error message contains error
+      expect(body).to.include('Error: Media query must be provided');
+    });
   });
 
   describe('JS', () => {

packages/astro/test/fixtures/errors/src/components/SvelteDirectiveError.svelte

@@ -0,0 +1,2 @@
+<h1>I shouldn’t be here</h1>
+

packages/astro/test/fixtures/errors/src/pages/astro-client-media-error.astro

@@ -0,0 +1,7 @@
+---
+import SvelteDirectiveError from '../components/SvelteDirectiveError.svelte';
+---
+
+<div>
+  <SvelteDirectiveError client:media />
+</div>

packages/astro/test/fixtures/errors/src/pages/astro-hydration-error.astro

@@ -0,0 +1,7 @@
+---
+import SvelteDirectiveError from '../components/SvelteDirectiveError.svelte';
+---
+
+<div>
+  <SvelteDirectiveError client:loadm />
+</div>