Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

49

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Dynamic Imports and Frontmatter

In this video, we will learn how to dynamically import our files.

Downloads

Become a pro to download code and videos

Comments

Sunjay

6 months ago [edited]

Amy and S, it's possible that you are running into errors because Svelte has since updated its documentation for the load() function (https://kit.svelte.dev/docs/loading) .

The new docs say that params can be used by itself (as opposed to page.params). Here's the code I used:

<script context="module">
    export async function load({ url, params }) {
        const Post = (await import(`../../posts/${params.slug}.md`)).default;

        return {
            props: {
                Post,
            }
        }
    }
</script>

<script>
    export let Post;
</script>

<Post />

S

7 months ago [edited]

I'm having the same problem as Amy. Would be nice to have some sort of errata explanation about how to fix it. A quick workaround (that doesn't fix the underlying issue but at least removes the error message is to wrap the import in a try/catch.

let BlogPost = null;
try {
    BlogPost = (await import(`../../posts/${page?.params?.slug}.md`)).default;
  } catch (e) {}

Amy

about 1 year ago [edited]

@Bryan I have checked and rechecked and also used the code provided and still getting the same error. I am not the only one that encountered this... see this thread here my issue is the exact same thing and I might mention that I am also using Windows machine. Similar thread with same question asked by another person taking the same tutorial here: https://githubmemory.com/repo/sveltejs/kit/issues/2014
I'm loving this course but can't really move on until I get this figured out. Thank you for any help!

Bryan

about 1 year ago [edited]

@Amy, Are you sure your import path is correct?

@Scott, why is this approach preferable to just dropping all the markdown files directly into a 'routes' directory. With MDSvex and the file based router, each post could already be available at say '/blog/filename'. Just add a post specific layout to deal with the front matter.

Mostly asking because I'm not sure that kind of import will work for certain build targets (adapter-netlify) for instance, or others where you are doing server rendering.

Amy

about 1 year ago

I cannot get my dynamic pages of hello or goodbye to load with my code or the code provided...not saying that it's not my fault, just would like to proceed. It's saying: failed to load module for the ssr: posts/hello (same for the goodbye) then, the Error: failed to load module for ssr: posts/hello at instantiateModule and then gives the file path to the dist\node\chunks\dep-c1a9de64.js Anyone have any thoughts on this? Thank you!!

Want to join the conversation?

Become a Pro member today!