Plugins not working with custom components

[Magnus-Ignitic]

Using a custom layout with custom components causes plugins manipulating the HAST not to work. For example unwrapping images.

My svelte.config.js:

const mdsvexOptions = {
  extensions: ['.md'],
  /* Removing this layout makes plugins work */
  layout: {
    _: dirname(fileURLToPath(import.meta.url)) + '/src/mdsvex.svelte',
  },
  remarkPlugins: [remarkFlexibleParagraphs],
  rehypePlugins: [rehypeUnwrapImages, rehypeSlug],
};

/** @type {import('@sveltejs/kit').Config} */
const config = {
  extensions: ['.svelte', '.md'],
  preprocess: [
    vitePreprocess({
      postcss: true,
      defaults: { style: 'postcss' },
    }),
    mdsvex(mdsvexOptions),
  ],

and mdsvex.svelte:

<script lang="ts" module>
  import { img } from '$lib/components/markdown';
  // eslint-disable-next-line no-import-assign
  export { img };
</script>

<script lang="ts">
  import type { Snippet } from 'svelte';
  const { children }: { children: Snippet } = $props();
</script>

{@render children?.()}

The img component still renders inside a p-tag. Removing the img component from mdsvex.svelte or removing the layout from svelte.config.js makes it work.

Happened with Svelte 4, too, but didn't notice it then. With Svelte 5, however, an error is thrown trying to place the <figure> tag inside a <p>.

Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

	in mdsvex.svelte
	in burndown-charts-visual-tool-forecasting.md
	in Article.svelte
	in +page.svelte
	in +layout.svelte
	in tooltip-provider.svelte
	in +layout.svelte
	in layout.svelte
	in root.svelte

    at Module.child (chunk-KWZHZ53T.js?v=a116dced:2379:27)
    at Img (img.svelte:34:27)