how to render mdx in svelte

I'm building a blog using sveltekit + sqlite3, I want to store mdx content to database and render them dynamiclly

My solution is:

1. use mdsvex to compile .mdx to .svelte
2. use svelte to compile .svelte to .js

But saddly this doesn't work. here are my demo code:

/src/routes/test/+page.server.ts

import type { PageServerLoad } from "./$types"import { mdsvex, compile } from "mdsvex";import { compile as svelteCompile } from 'svelte/compiler';export const load: PageServerLoad = async () => {  const source = `<script>          import Chart from '$lib/components/Chart.svelte';</script>        # Hello friends<Chart />        `;  // md --> svelte  const { code: transformed_code } = await compile(source, {    extensions: ['.md', '.svx'],    preprocess: mdsvex(),  });  console.log('compiled', transformed_code)  // svelte --> js  const { js } = svelteCompile(transformed_code, { generate: 'dom' });  console.log('js', js.code);  return { transformed_code: js.code };}

/src/routes/test/+page.svelte

<script lang="ts">    export let data;</script>{@html data.transformed_code}