ReferenceError: document is not defined. Server Side rendering does not seem to work.

[insipidish]

Hi

I am trying to use the Markup component while rendering server side with preact-render-to-string.
I get the following error: 'ReferenceError: document is not defined'

Could you suggest a work around?

[developit]

Ah yeah that's a good point. This uses the browser's built-in DOM parser, which isn't available under node. Should be possible to detect node and require() in a simple parser lib though! Will need to update the code :)

[danielweck]

Preact WMR injects a NodeJS DOMParser for static SSR (aka "prerender"):

globalThis.DOMParser = new (require('jsdom').JSDOM)('').window.DOMParser;

https://github.com/preactjs/wmr/blob/7077053172e4ef347397cdde375c806ab8f32d8e/docs/public/prerender.js#L6-L12

(PR context: https://github.com/preactjs/wmr/pull/497/files )

This way, this never fails:

preact-markup/src/parse-markup.js

Lines 22 to 26 in 4788b8d

	try {
	doc = new DOMParser().parseFromString(wrappedMarkup, mime);
	} catch (err) {
	parserError = err;
	}

...and this iframe-based fallback never gets called in the html case:

preact-markup/src/parse-markup.js

Lines 60 to 69 in 4788b8d

	function buildParserFrame() {
	if (document.implementation && document.implementation.createHTMLDocument) {
	return document.implementation.createHTMLDocument('');
	}
	let frame = document.createElement('iframe');
	frame.style.cssText = 'position:absolute; left:0; top:-999em; width:1px; height:1px; overflow:hidden;';
	frame.setAttribute('sandbox', 'allow-forms');
	document.body.appendChild(frame);
	return frame.contentWindow.document;
	}

Related PRs:

#24

#22

#40

#18