fix: explicitly check for null props in `serializeSignals` (#11930)

* fix: explicitly check for null props in `serializeSignals`

* chore: add changeset

5 files changed, 24 insertions, 2 deletions

diff --git a/.changeset/long-lemons-add.md b/.changeset/long-lemons-add.md
new file mode 100644
index 000000000..2ad0ecd20
--- /dev/null
+++ b/.changeset/long-lemons-add.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/preact': patch
+---
+
+Preact components no longer throw an error if a property is null.
diff --git a/packages/astro/test/fixtures/preact-component/src/components/ComponentWithNullProp.jsx b/packages/astro/test/fixtures/preact-component/src/components/ComponentWithNullProp.jsx
new file mode 100644
index 000000000..53856ce90
--- /dev/null
+++ b/packages/astro/test/fixtures/preact-component/src/components/ComponentWithNullProp.jsx
@@ -0,0 +1,7 @@
+import { h } from 'preact';
+
+export default ({ nullProp }) => {
+  return <div id="preact-component-with-null-prop">
+		<p>I have a null prop: {nullProp}</p>
+	</div>
+}
\ No newline at end of file
diff --git a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
index 37b43a73c..8abfe8f02 100644
--- a/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
+++ b/packages/astro/test/fixtures/preact-component/src/pages/signals.astro
@@ -3,6 +3,7 @@ import { signal } from '@preact/signals';
 import Signals from '../components/Signals';
 import SignalsInArray from '../components/SignalsInArray';
 import SignalsInObject from '../components/SignalsInObject';
+import ComponentWithNullProp from '../components/ComponentWithNullProp';
 const count = signal(1);
 const secondCount = signal(2);
 ---
@@ -14,6 +15,7 @@ const secondCount = signal(2);
 		<Signals client:load count={count} />
 		<Signals client:load count={count} />
 		<SignalsInArray client:load signalsArray={["I'm not a signal", count, count, 12345, secondCount]} />
-		<SignalsInObject client:load signalsObject={{title:'I am a title', counter: count}} />
+		<SignalsInObject client:load signalsObject={{title:'I am a title', counter: count}}, />
+		<ComponentWithNullProp client:load nullProp={null} />
 	</body>
 </html>
diff --git a/packages/astro/test/preact-component.test.js b/packages/astro/test/preact-component.test.js
index f5b5c7233..221245b1c 100644
--- a/packages/astro/test/preact-component.test.js
+++ b/packages/astro/test/preact-component.test.js
@@ -140,4 +140,11 @@ describe('Preact component', () => {
 		assert.equal(element.find('h1').text(), 'I am a title');
 		assert.equal(element.find('p').text(), '1');
 	});
+
+	it('Can use null props', async () => {
+		const html = await fixture.readFile('/signals/index.html');
+		const $ = cheerio.load(html);
+
+		assert.equal($('#preact-component-with-null-prop').length, 1);
+	});
 });
diff --git a/packages/integrations/preact/src/signals.ts b/packages/integrations/preact/src/signals.ts
index 7b797f385..a1f63acdd 100644
--- a/packages/integrations/preact/src/signals.ts
+++ b/packages/integrations/preact/src/signals.ts
@@ -38,7 +38,8 @@ export function serializeSignals(
 	const signals: Signals = {};
 	for (const [key, value] of Object.entries(props)) {
 		const isPropArray = Array.isArray(value);
-		const isPropObject = !isSignal(value) && typeof props[key] === 'object' && !isPropArray;
+		// `typeof null` is 'object' in JS, so we need to check for `null` specifically
+		const isPropObject = !isSignal(value) && typeof props[key] === 'object' && props[key] !== null && !isPropArray; 
 
 		if (isPropObject || isPropArray) {
 			const values = isPropObject ? Object.keys(props[key]) : value;