I wanted to import component dynamically to create something like a blog in Svelte 5. Very similar to this approach here in Svelte 3 or 4:
https://github.com/ScriptRaccoon/blog-sveltekit-approach/tree/main
I have this +page.server.js
file
export async function load() {
const posts_paths = Object.keys(import.meta.glob('/src/routes/posts_projects/*/+page.svelte'));
const unsorted_posts = await Promise.all(
posts_paths.map(async (path) => {
const link = path.split('/').at(-2) ?? '';
const component = await import(`../../routes/posts_projects/${link}/+page.svelte`);
console.log(component);
const { title, date } = component;
return { title, date, link };
})
);
return { unsorted_posts };
}
However, when I log the component
, there is not title or date. It looks like this:
{
default: [Function: _page] {
render: [Function (anonymous)],
[Symbol(filename)]: 'src/routes/posts_projects/temperature_anomaly/+page.svelte'
},
[Symbol(Symbol.toStringTag)]: 'Module'
}
While when I clone the repo from above and log the component I get this:
{
default: { render: [Function: render], '$$render': [Function: $$render] },
title: [Getter],
date: [Getter],
[Symbol(Symbol.toStringTag)]: 'Module'
}
A post component, in my svelte-5 application, looks like this:
<script module>
import Post from '../Post.svelte';
let date = new Date('2025-01-01');
let title = 'test tile';
</script>
<Post {title} {date}>content...</Post>
I guess I’m missing something obvious here. But anyone got an idea?
update
Ok I got a little confused here. In the original example it’s used the and some variables are exported like this:
<script lang="ts" context="module">
import Post from "../Post.svelte";
export let title = "My first blog post";
export let date = new Date("2023-01-22");
</script>
I wrongly thought that this would be svelte-code, but its just exporting these varibles I think. So just adding the export
-statement did the job. My bad