Reg. SvelteKit CRUD Blog Post - Accessing Component Param from +page.svelte
Hi:
Love the SvelteKit post -- Building a CRUD App with SvelteKit.
Thank you. 🙂
Now, as I am coding along, I am having an issue when accessing the 'open' component param for Dialog.svelte, from +page.svelte, with the shared code.
While the TS Server throws up the error that 'open' cannot be assigned since it is a function (ts:2630), when passing it into the <Button /> on:click event arrow function; further below, while initialising the <Dialog /> component itself, with the '<Dialog {open} />' line, while it is rightly identified as a boolean prop out here, it seems to be identified as undefined (ts:2322) by the editor/language-server. What gives? What could I do to get around this? Kindly advise. BR/ Paresh
While the TS Server throws up the error that 'open' cannot be assigned since it is a function (ts:2630), when passing it into the <Button /> on:click event arrow function; further below, while initialising the <Dialog /> component itself, with the '<Dialog {open} />' line, while it is rightly identified as a boolean prop out here, it seems to be identified as undefined (ts:2322) by the editor/language-server. What gives? What could I do to get around this? Kindly advise. BR/ Paresh
5 Replies
Hey @Necati 👋,
Could you help?
harsh-harlequin•2y ago
Sure, I'll get back to you soon
Hi @pareshpandit,
I guess we forgot to add "let open = false;" initialization to +page.svelte code block in the article.
Just simply add the line below
https://github.com/pankod/refine/blob/next/examples/blog/sveltekit-crud/src/routes/%2Bpage.svelte#L17
We are going to update the article soon. Thank for informing us
Let me know if it's works for you
extended-salmon•2y ago
Many thanks @Necati . Appreciate your prompt and pointed guidance, and for updating the post. 🙂
[Just discovered that via : https://svelte.dev/repl/c233f0db93fa4f3ba3f503fefd6faa7d?version=3.16.0 , as well. It solved the strictness issue, but still the page rendering is hindered.]
Right now, with that fixed, I have VS Code yelling at me over the <LinearProgress /> Component in Table.svelte. It wasn't doing so earlier, but now, after re-sorting things, this is the latest. Lol. 😄
Here's a screen shot, [vs. typing ]: PFA img. ==> [O]
To be honest, it was working outside of the earlier issue. And I did see the table load with a pre-loader. So, maybe it is not the one creating the problem at all, for all I know/understand.
But, just as before, even right now, the 'ADD NEW' button disappears upon page load, and the table headers show up, but it does not populate (or run the 'linear progress bar'). Thus, perhaps it is a state management issue of some sort? (As you can see, am a relative noob front-ender. Apologies in advance.)
It would be great if you could shed some light on this as well.
Component binding • REPL • Svelte
Cybernetically enhanced web apps
harsh-harlequin•2y ago
Here is the final version of the example app. So you can compare with your code:
https://github.com/pankod/refine/tree/next/examples/blog/sveltekit-crud
extended-salmon•2y ago
I shall compare and look into it. Thanks.
Funnily enough, it is the exact same code, and config. However, your version is running fine, and mine still is stuck where it was, with the last error (which it does not throw in your compilation). But yeah, your update is working buttery smooth, as of now. 🙂