Failed to apply Custom Components in Svelte 4/5 + SvelteKit 2

[ironkayman]

Hello! I can't seem to make Custom Compoenents' replacement work within an imported .mdx module as described in documentation. I am currently using SvelteKit 2 and have tried both Svelte 4 and Svelte 5:

# svelte 4
@sveltejs/kit@2.5.28
mdsvex@0.12.3
remark@15.0.1
svelte-check@3.8.6
svelte-routing@2.13.0
svelte@4.2.19

The same behavior described below I am also observing in Svelte 5: 5.19.6, to which I have migrated over the course of other elements of the project being updated, while being unable to resolve the issue in question myself:

# svelte 5
@sveltejs/kit@2.16.1
mdsvex@0.12.3
remark@15.0.1
svelte-check@4.1.4
svelte-routing@2.13.0
svelte@5.19.6

I have tried multiple ways to use an imported .mdx component with a prior established layout configuration (see below):

• src/routes/.../+page.svelte (usage variant 1):

  <script>
      import LargeDocument from "$lib/entries/large_document.mdx"
  </script>
  
  <LargeDocument /> 

• src/routes/.../+page.svelte (usage variant 2):

  <script>
      import LargeDocument from "$lib/entries/large_document.mdx"
   </script>
  
  </LargeDocument></LargeDocument>

• src/routes/.../+page.svelte (usage variant 3):

  <script>
      import LargeDocument from "$lib/entries/large_document.mdx"
      let data = LargeDocument;
  </script>
  
  <div class="container">
    <div id="toc-builder-preview">
      <svelte:component this={data}></svelte:component>
    </div>
  </div>

With none of those variants so far I managed to make Custom Components work. As I understand, there had been some changes in the naming convention of layouts across svelte and sveltekit:

• __layout.svelte is used in earlier versions of SvelteKit
• +layout.svelte is used in the latest versions of SvelteKit
• layout.svelte is generally used in basic Svelte applications (non-SvelteKit)

The reason I looked into it is due to inability to anyway import cusom components, as placing and renaming the layout does not seem to cause any components working:

src/routes/__layout.svelte / src/routes/+layout.svelte / src/routes/.../Layout.svelte (naming from mdsvex docs, see below) / src/routes/.../+layout.svelte:

 <script context="module">
  import a from "$lib/components/link.svelte";
  export { a }
</script>

<slot />

The last case (src/routes/.../+layout.svelte) also contains other logic, which works as intended, apart from the components, as they are not applied silently (no logs or errors on the dev console):

<div class="background"></div>
<div>
  <slot/>
</div>

<script context="module">
  import "@fontsource/open-sans"
  import "./layout.css"

  import a from "$lib/components/simple_link.svelte";
  export { a }
</script>

The compoent in question, with which I want to replace a default link (tag <a>), - simple_link.svelte, - is the dummy component from #292 (comment), I have also tried, just in case, other components wich also contain slots and only add a few wrapping html tags in order to chack if they are actually applied.

I have tried the sveltekit layouts as above, and, based on #292 (reply in thread) attempted to use src/routes/.../layout.svelte and src/routes/.../Layout.svelte, although I did not quite understand, weather it is mdsvex's own layout file or its just is Svelte's naming convention.

Based on the custom components section - exports from the context="module" script of your Layout file, I understood that it is Svelte's and SvelteKit's layout file, but written in Svelte 3 and/or SvelteKit 1 paradigm:

Custom components allow you to replace these elements with components. You can define components by exporting named exports from the context="module" script of your Layout file:

<script context="module">
  import { h1, p, li } from './components.js';
  export { h1, p, li };
</script>

...

The above custom components would generate:

<script>
  import * as Components from './Layout.svelte';
</script>

<Components.h1>Title</Components.h1>
<Components.p>Some text</Components.p>
<ul>
 <Components.li>a</Components.li>
 <Components.li>short</Components.li>
 <Components.li>list</Components.li>
</ul>

Svelte configuration in my project:

• mdsvex.config.js:

  import { defineMDSveXConfig as defineConfig } from "mdsvex";
  
  const config = defineConfig({
    extensions: [".mdx", ".md",],
    
     components: {
        h2: () => import("$lib/components/h2.svelte"),
        h3: () => import("$lib/components/h3.svelte"),
        h4: () => import("$lib/components/h4.svelte"),
        a: () => import("$lib/components/link.svelte"),
      },
        
    remarkPlugins: [],
    rehypePlugins: [],
  });
  
  export default config;

• svelte.config.js:

  import {mdsvex} from "mdsvex";
  import mdsvexConfig from "./mdsvex.config.js";
  
  /** @type {import('@sveltejs/kit').Config}*/
  const config = {
    extensions: [".svelte", ...mdsvexConfig.extensions],
  ...

I had also tried applying solutions such as:

• Custom components not loading #474
• Plugins not working with custom components #687
• Layout relative path problem with monorepo and VSCode  #556
• Custom components not loading #474 (comment)

which also haven't resolved the issue in question.

My current workaround consists of preprocessing entirety of the project in 2 steps: pasting <script> with my components' imports and through regular expressions replace .mdx syntax, such as links ([...](...)), as sloted components. Of course, this is far from ideal, as more components had to be reimplimented through preprocessing/templating for separate svelte routes, wherein each implimentation of a component, for example, a link, varies.

I understand, that this package greatly simplies the process of working with already nuanced specification of mdx. As far as I can see, I might be missing something very obvious regarding layout managements/routing within SvelteKit 2 ecosystem and its design patterns.

Creating this thread due to #292 being already answered, but not seemingly solving my issue.

Appreciate any help. Thank you.