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