Fix debug crash (#4507)

Author: JoviDeCroock

debug/src/debug.js

@@ -585,7 +585,9 @@ export function serializeVNode(vnode) {
 
 options._hydrationMismatch = (newVNode, excessDomChildren) => {
 	const { type } = newVNode;
-	const availableTypes = excessDomChildren.map(child => child.localName);
+	const availableTypes = excessDomChildren
+		.map(child => child && child.localName)
+		.filter(Boolean);
 	console.error(
 		`Expected a DOM node of type ${type} but found ${availableTypes.join(', ')}as available DOM-node(s), this is caused by the SSR'd HTML containing different DOM-nodes compared to the hydrated one.\n\n${getOwnerStack(newVNode)}`
 	);

src/internal.d.ts

@@ -46,7 +46,10 @@ declare global {
 			errorInfo?: ErrorInfo | undefined
 		): void;
 		/** Attach a hook that fires when hydration can't find a proper DOM-node to match with */
-		_hydrationMismatch?(vnode: VNode, excessDomChildren: PreactElement[]): void;
+		_hydrationMismatch?(
+			vnode: VNode,
+			excessDomChildren: Array<PreactElement | null>
+		): void;
 	}
 
 	export type ComponentChild =