jsdom issues

[carstenjaksch]

I try to get jsdom to work. Well ... it does work. But some things are off:

1. I get this error in the browser console.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prototype')

The stack trace mentions jsdom: at node_modules/jsdom/lib/api.js (api.js:6:27)

2. bind:offsetHeight of the parent component where the parsed HTML nodes get passed into a slot does not work anymore. It is undefined.

The HTML is there, but the browser stuff does not work. I know jsdom is a Node (backend) tool. But how do I handle that in a browser environment?

This is my jsdom code inside the child component:

<script lang="ts">
	import { JSDOM } from 'jsdom';
	import H2 from '$lib/components/heading/H2.svelte';
	import H3 from '$lib/components/heading/H3.svelte';

        // HTML string gets passed as prop.
	export let html: string;

        // Convert to a node list.
	const dom = new JSDOM(html);
	const { document } = dom.window;
	const nodes = document.querySelectorAll('h2, h3, p, ul, ol');

        // Available components to load.
	const components: { [key: string]: ComponentType<SvelteComponent> } = { H2, H3 };

        // Rewrite nodeName to an uppercase version from which we can load available components by their key from the object above.
	function componentName(name: string) {
		return capitalize(name.toLowerCase());
	}
</script>

<div class="richtext">
	{#each nodes as node}
		{#if componentName(node.nodeName) in components}
			<svelte:component this={components[componentName(node.nodeName)]}>
				{node.textContent}
			</svelte:component>
		{:else}
			{@html node.outerHTML}
		{/if}
	{/each}
</div>

I am trying to parse some HTML string that comes from an API and parse it into nodes that I can process to load components from a list. If no corresponding component is there, output the HTML only.

As I said, the HTML and components are there. It works ... But the other stuff that relies on this HTML does not work (it worked before).

Any help would be much appreciated!

[Estr0gen]

Did you ever figure this out? I came from #905

[carstenjaksch]

In my case, it was better to prepare the HTML object on the server side. We use WordPress to deliver the content and I use DOMDocument to parse the HTML into an array of objects, which will be "translated" to dynamically loaded components in SvelteKit.