Custom components not loading

[webel]

Hi!

I've confirmed that my Layout.svelte is being loaded, although the exported custom components at the top aren't being used:

<script context="module">
    import img from '../basics/Image.svelte';
    import p from '../basics/Paragraph.svelte';
    export { img, p }
</script>

Where my Paragraph.svelte looks like this:

<p class="help"><slot /></p>

And my image component:

<script>
  export let src;
  export let alt = "An alt"
</script>

<div class="is-this-real-life">
  <img {src} {alt} />
</div>

My mdsvex config looks like this:

import { defineMDSveXConfig as defineConfig } from 'mdsvex';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';
import remarkGfm from 'remark-gfm';
import remarkDirective from 'remark-directive';
import remarkParse from 'remark-parse';
import remarkFrontmatter from 'remark-frontmatter';
import headings from './md_plugins/headings.js';
import { directive } from './md_plugins/directive.js';

const config = defineConfig({
	extensions: ['.svelte.md', '.md', '.svx'],

	smartypants: {
		dashes: 'oldschool'
	},

	remarkPlugins: [headings, remarkGfm, remarkParse, remarkFrontmatter, remarkDirective, directive],
	rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
	layout : './src/components/layout/MarkdownLayout.svelte'
});

export default config;

If my memory serves me right... having remarkGfm breaks things? Which is why I've had to use remarkFrontmatter... and might be why the custom components aren't working?

[cdebotton]

I'm having this issue without any plugins at all or custom configuration to mdsvex at all.

[YonicDev]

I'm having the same issue. Custom components aren't being replaced at all, but code in the module context scripts seems to be running just fine.

If it's SvelteKit, it could be because of custom handling of mdsvex files.

Here's my +page.ts:

export const load: PageLoad = async({params}) => {
    const modules = import.meta.glob("/src/articles/**/*.{md,svx,svelte.md}");
    let match: { path?: string; resolver?: () => Promise<MdsvexFile> } = {};
    for (const [path, resolver] of Object.entries(modules)) {
        const source = processPath(params.section, path);
        if(source==null)
            continue;
        const {slug,locale} = source;
        if (slug === params.article && locale === (params.lang ?? "en")) {
            match = { path, resolver: resolver as unknown as () => Promise<MdsvexFile> };
            break;
        }
    }

    const {default: post} = await match?.resolver?.();
    
    if (!post) {
        throw error(404); // Couldn't resolve the post
    }

    return {
        component: post,
        section: params.section as App.Section,
    }
}; 

When logging post.render().html, the HTML elements have not been replaced.

[Finnepinnen]

It started working for me when I added an explicit path to the layout file to the svelte.config.js

    mdsvex({
      extensions: [".svx"],
      layout: {
        _: "src/routes/blog/+layout.svelte",
      },
    }),

[H0R5E]

> It started working for me when I added an explicit path to the layout file to the svelte.config.js

Again, for me, setting the default layout explicitly with underscore seems to fix this:

layout: {
  _: "path/to/my/layout",
},

EDIT: Nope, it works fine with the implicit default layout. The problem is that the components don't get picked up unless you restart the Vite server in dev mode.