outros$1 undefined errors with svelte web components (custom elements)

Viewed 128

when building web components, aka named custom elements, with svelte 3.19.2, i am getting outros$1 undefined error just before outros$1.c.push when i try and use {#if} or {#await} but {#each} is working fine.

Works:

{ #each myTodos as todo }
    <li>{ todo.text }</li>
{ /each }

Doesn't Work:

{ #if loadingTodos }
    <p>loading</p>
{ :else }
    <p>loaded</p>
{ /if }

Doesn't Work:

{ #await todos }
    <p>loading</p>
{ :then result }
    <p>loaded</p>
{ :catch error }
    { error }
{ /await }

Relevant Supporting Code:

const todos = query(apolloClient, { query: Q_TODOS_ALL });
todos.result().then((result) => { myTodos = result.data.getTodos; loadingTodos = false; });

Anyone have any ideas how to address this? I'm new to Svelte and at a loss. This code couldn't be simpler code. The graphql promise is returning and works with an each, if's and await's in the template both throw outros$1 undefined errors though.

Seems a couple of other bugs on github (#3448 & #3165) are also related to there being no checks around outros and it going undefined. Not sure if they are related or not. i'm wondering if this is a know issue with using svelte for building web components? Thanks.

0 Answers
Related