Render empty string when encountering portals

Author: JoviDeCroock

.changeset/loud-plums-pay.md

@@ -0,0 +1,5 @@
+---
+'preact-render-to-string': patch
+---
+
+Render an empty string when encountering portals

src/index.js

@@ -303,6 +303,13 @@ function _renderToString(
 
 	// Invoke rendering on Components
 	if (typeof type == 'function') {
+		// Portals: createPortal() sets `containerInfo` on the vnode.
+		// In SSR there is no DOM to portal into, so we just render an
+		// empty placeholder and skip the component entirely.
+		if ('containerInfo' in vnode) {
+			return '';
+		}
+
 		let cctx = context,
 			contextType,
 			rendered,

test/compat/index.test.jsx

@@ -1,8 +1,72 @@
 import render from '../../src/index.js';
-import { createElement as h, Component } from 'preact/compat';
+import { createElement as h, Component, createPortal } from 'preact/compat';
 import { expect, describe, it } from 'vitest';
 
 describe('compat', () => {
+	describe('createPortal', () => {
+		it('should render portal children inline', () => {
+			const container = { nodeType: 1 };
+			const rendered = render(
+				<div>
+					<span>before</span>
+					{createPortal(<div class="portal-content">portaled</div>, container)}
+					<span>after</span>
+				</div>
+			);
+			expect(rendered).to.equal(
+				'<div><span>before</span><div class="portal-content"></div><span>after</span></div>'
+			);
+		});
+
+		it('should render nested portals', () => {
+			const container1 = { nodeType: 1 };
+			const container2 = { nodeType: 1 };
+			const rendered = render(
+				<div>
+					{createPortal(
+						<div class="outer">
+							{createPortal(<div class="inner">nested</div>, container2)}
+						</div>,
+						container1
+					)}
+				</div>
+			);
+			expect(rendered).to.equal(
+				'<div><div class="outer"><div class="inner">nested</div></div></div>'
+			);
+		});
+
+		it('should render portal with multiple children', () => {
+			const container = { nodeType: 1 };
+			const rendered = render(
+				<div>
+					{createPortal(
+						[<span key="a">first</span>, <span key="b">second</span>],
+						container
+					)}
+				</div>
+			);
+			expect(rendered).to.equal('<div></div>');
+		});
+
+		it('should render portal with text content', () => {
+			const container = { nodeType: 1 };
+			const rendered = render(
+				<div>{createPortal('just text', container)}</div>
+			);
+			expect(rendered).to.equal('<div></div>');
+		});
+
+		it('should render portal with component children', () => {
+			const container = { nodeType: 1 };
+			function Inner() {
+				return <em>component inside portal</em>;
+			}
+			const rendered = render(<div>{createPortal(<Inner />, container)}</div>);
+			expect(rendered).to.equal('<div></div>');
+		});
+	});
+
 	it('should not duplicate class attribute when className is empty', async () => {
 		let rendered = render(h('div', { className: '' }));
 		let expected = `<div></div>`;