Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Dynamic import of component - missing the getter in Svelte 5

$
0
0

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.jsfile

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


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>