Vite glob import - accessing body / payload in SvelteKit?

user_726221 0
Viewed 677

I'm using the glob import functionality of Vite to bring in multiple markdown files to a SvelteKit page:

<script context="module">
    export async function load() {
        const employmentsMeta =
            import.meta.globEager('./employments/*.md');
        return {
            props: {
                employmentsMeta: employmentsMeta
            }
        };
    }
</script>

<script>
    export let employmentsMeta;
</script>

This works well for me to access the metadata via employmentsMeta[Object.keys(employmentsMeta)[0]]['metadata']. I'm having difficulty accessing the actual contents of the markdown file, however - no matter how I attempt to access it, it seems to be coming back as undefined.

For example, console.log(employmentsMeta[Object.keys(employmentsMeta)[0]['default']]) returns undefined, despite my understanding that there's a default export object in there, and the metadata access working as intended.

How do I access the payload / body of the imported markdown?

sveltekit vite svelte javascript
1 Answers

I have a similar use-case, with markdown files in SvelteKit as blog posts.

In your example, I'd get the file contents as html like this:

const contents = employmentsMeta[Object.keys(employmentsMeta)[0]].default.render();

contents here is an object like this:

{
  html: '/* a string with the markdown content parsed as html */',
  css: { code: '', map: null },
  head: '',
}

I guess you have to use mdsvex for the md->html conversion to happen.

EDIT: I should mention that I do this in an endpoint ([slug].json.js), return the results, and get them in the route, as doing it in the load function was throwing an error (...default.render is not a function) client-side.

user_96692890
Related