Props not appearing in Svelte DevTools

I’m building an app as a way to learn Svelte. It’s all functioning perfectly, but when I look at it in Svelte DevTools, the props on components don’t appear, although their values appear in the state as an array. I guess I must be doing something wrong, but can anyone tell me what?

The screenshot shows the app with the Artist component loaded. I would expect it to have an artistId prop with the value 1, but it doesn’t.

The page() function in the code is from Page.js which I’m using for routing.

// app.js

import page from 'page'

import App from './views/App.svelte'

const app = new App({
    target: document.body,
    props:  {
        artistId: null,
        route: null,
    },
})

function artist (ctx) {
    const artistId = ctx.params.artistId

    app.$set({
        route:    'artist',
        artistId: artistId,
    })
}

page('/artist/:artistId', artist)
page()

// App.svelte

<script>
    import Artist      from './Artist.svelte'
    import Head        from '../parts/Head.svelte' // sets page titles
    import Home        from './Home.svelte'
    import HomeLink    from '../parts/HomeLink.svelte' // navigation

    export let artistId
    export let route
</script>

<HomeLink route={route} />

{#if route === 'artist'}
    <Artist artistId={artistId} />
{:else}
    <Home />
{/if}

// Artist.svelte

<script>
    import { onMount } from 'svelte'
    import { pageName } from '../stores.js'

    export let artistId

    let artistName

    onMount(async () => {
        // fetches various details from API, sets artistName etc

        $pageName = `Artist details: ${artistName}` // used by Head.svelte
    })
</script>

Answer

This is a known issue — it should be fixed by https://github.com/sveltejs/svelte/pull/3822

Advertisement

Answer