Remote markdown (via CMS), suggestions?

[raulfdm]

Hello everyone 👋

I have a question regarding not using the local ".mds" files approach which I couldn't find any good explanation and it seems it might be a misunderstanding from myself of how Vite + sveltekit + mdsvex works altogether.

I'm sorry if this discussion is too long but I'll try to give as many details as I can so you can understand and see what detail is missing.

Please let me know if this isn't clear enough.

The problem

Almost all examples I find here, on YouTube, courses that talk about MDX using mdsvex are based on local files.

I currently have a blog/website in NextJS which loads mdx from a CMS (strapi) and renders using a package called next-mdx-remote.

• The mdx configuration
• This is how the serialization starts
• This is how the final render looks like

Long story short, it does the same thing as mdsvex does with the same API but it does server (SSG) / client (hydration) work, but the configuration is pretty similar.

I currently host this website on Vercel and do it via SSG + Lambda function, which the sveltekit-adapter/vercel handles pretty well.

Attempts to solve the problem

Here is some stuff I tried out. The second attempt did the job but it feels... hacky.

Also, I didn't stress it out enough with some remark/rehype plugins I currently use, which can also cause some issues but it's another topic.

Attempt 1: compile via `load` function

My first attempt was by, in a routes/blog/[index].svelte page, emulates the compilation there:

<script context="module">
  export async function load() {
    const mdsvex = await import('mdsvex');

    const data = await mdsvex.compile(
      `
      # Hello World

      - Foo
      - bar
    `,
      {},
    );

    return {
      props: {
        data,
      },
    };
  }
</script>

<script lang="ts">
  export let data = {};
</script>


{@html data.code}

But by doing that, it renders correctly server-side and I can see the first render on the screen with the data but right after it throws an error in the server:

19:52:02 [vite] new dependencies found: mdsvex, updating...
 > ../../node_modules/mdsvex/dist/main.es.js:2:24: error: No matching export in "browser-external:path" for import "join"
    2 │ import path__default, { join } from 'path';

Attempt 2: importing `mdsvex/dist/umd` module (it works but...)

I read somewhere someone suggesting to import mdsvex/dist/browser-umd instead.

  export async function load() {
-   const mdsvex = await import('mdsvex');
+   const mdsvex = await import('mdsvex/dist/browser-umd.js');

    const data = await mdsvex.compile(
      `
      # Hello World

      - Foo
      - bar
    `,
      {},
    );

    return {
      props: {
        data,
      },
    };
  }

This works just fine for both dev and preview mode but it throws a warning of a huge chunk:

.svelte-kit/output/client/_app/chunks/browser-umd-bfb1209d.js               622.55kb / brotli: skipped (large chunk)

(!) Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
vite v2.4.2 building SSR bundle for production...
✓ 58 modules transformed.
.svelte-kit/output/server/app.js   94.39kb

It makes sense because the lib itself has ~500kb.

Final thoughts

What do you think about that? Is this the correct approach? Have you solved this problem differently? Is there some Vite configuration I should do to solve that?

Thanks for reading :)

Resources

• Open PR with my attempt: WIP: feat: add mdx raulfdm/raulmelo-studio#534
• Working on Vercel: https://raulmelo-dev-svelte-b54m5z4c7-raulfdm.vercel.app/blog/test

[raulfdm]

I just draw a workflow to make easier to visualize:

[magick93]

Thanks for posting this.

I was also going to ask exactly the same question.

I'm also using Strapi, and for its 'rich' text, it outputs markdown. Im looking to understand how I can render remote (from Strapi) markdown as html, ideally using MDsveX.

[pahhh-blo]

Is there a way to resolve imports from the server side? I'm loading .svx files from the file system, but according to the docs, compile() doesn't resolve imports, but resolving imports is the one thing that this function should do! How else could I resolve imports?

<script context="module">
  export async function load() {
    const mdsvex = await import('mdsvex');

    const compiled = await mdsvex.compile(
      `
<script>
  import Chart from './Chart.svelte';
</script>

# Hello friends

<Chart />
    `,
      {},
    );

    return {
      props: {
        compiled,
      },
    };
  }
</script>

<script lang="ts">
  export let compiled = {};
</script>


{@html compiled.code}

I used next-mdx-remote, and my current expectation with compile() is that {@html compiled.code} would contain all the HTML, including svelte components.

[ardenschager]

Seeing this discussion, I'm going to bump it as I'm running into the same set of questions.

I have a CMS with some markdown functionality and am trying to see if I can render it using mdsvex, because it would be cool to write svelte components in the markdown from the CMS. The problem is basically how to render this out dynamically on the server, ideally as a string of html.

[raulfdm]

never found a decent solution.

I first migrated to Sanity CMS and was able to render the components through portable text but also I started using Astro, which handles all this complexity away