554 questions
2
votes
1
answer
90
views
Svelte 5: Typescript and rest props issue "'prop' is specified more than once"
I have component <Component> which is basically an instance of another component <Modal> (a modal used for a specific action).
For consistency and improved legibility I am passing all the ...
- 47
0
votes
1
answer
77
views
SvelteKit use prop for background-image [duplicate]
I am using SvelteKit and I have a component that displays a CSS background-image - see picture. I have this working with a hard-coded image but I need to vary the image from card to card.
Here is my ...
- 38
0
votes
1
answer
101
views
How i can manage a component that needs to use a custom event?
I’m using a custom Select component inside a table, and I want to make some reactive calculations in the parent component for example, updating the total price when a discount is selected through a ...
0
votes
1
answer
154
views
How to have regular code work with proxies
I have a derived variable from a property of a svelte component:
let {entity = $bindable(), targetType}: { entity: EntityDTO, targetType: EntityType } = $props();
const links = $derived(entity.links?....
- 2,692
1
vote
0
answers
133
views
Svelte Routing - Cannot read properties of undefined (reading 'before')
Not able to get routing to work without a bug. The route works if I click on the link twice, the second time, the correct page renders. The first a console output error is generated.
ERROR:
Uncaught ...
- 1,235
0
votes
1
answer
44
views
Parameters in svelte action not reactive
Svelte action that does things when keys are pressed:
import type { Action } from "svelte/action"
export const keys: Action<HTMLElement, boolean> = (node, active?: boolean) => {
...
- 66.6k
0
votes
1
answer
97
views
Why my chrome extension is crashing during upload of image when Chrome is maximised?
I am using svelte to build a chrome extension which has the ability to upload images and Post that image to instagram. Here is my project directory structure.
├── .git/
├── .gitignore
├── .npmrc
├── ...
- 1,166
0
votes
1
answer
61
views
Convert component inheritance syntax to Svelte 5 function component
I am migrating my codebase from Svelte 4 to Svelte 5.
I had the following code:
import MarkdownLinkRenderer from '$lib/MarkdownLinkRenderer.svelte';
export function createMarkdownLinkRenderer(styles: ...
- 422
0
votes
1
answer
81
views
Export function from Svelte component
Component.svelte:
<script>
export function test(){
return "test";
}
</script>
App.svelte:
<script>
import { test } from "./Component.svelte" // error;
...
- 66.6k
0
votes
2
answers
580
views
Svelte child component props doesn't update on parent state change
Parent component:
<script>
import Child from "./Child.svelte"
import { onMount } from "svelte";
import apireq from "./api.js";
let items = $...
- 66.6k
2
votes
2
answers
2k
views
Other than children(), can I import and render multiple snippets in +layout.svelte that are defined in +page.svelte?
New to SvelteKit and trying to figure this part out...
Here's a couple of ways I was trying to achieve this, but the sidebar either doesn't load, or the navigation appears twice for some reason; with ...
- 45
0
votes
0
answers
56
views
How to import a svelte.ts component from another app where the import is with $lib
Hi im trying to import a svelte component from another svelte.ts app. This component has a script:
button.svelte:
<script lang="ts">
import { cn } from "$lib/utils.js";
...
- 3
0
votes
1
answer
168
views
How to disable svelte-check error in HTML part of Svelte component?
I have a component written in Svelte 5, using $props() rune.
LogActions.svelte
<script lang="ts">
//@ts-expect-error
let { onSave }: { (): void } = $props() ;
</script>
<...
0
votes
0
answers
42
views
Cant seem the send data to certain group SignalR
Sending information to specific groups is not working
For a school project is was trying to send data to my frontend im working on. However when i try to do that i receive notting. When i change from ...
- 1
1
vote
1
answer
369
views
How to Wrap Each Child with a Tag in Svelte 5?
In Svelte 5, how can I wrap each child with a tag like the example below?
{#if children}
{#each children as child}
<button
onclick={() => {
handleClick();
}}
>
...
- 23
0
votes
1
answer
145
views
Access svelte writable located in object
In shadcn ui port for svelte 5 - Select component (using bitsui select) bind:value asks for state(string), but Writable<string> works too as well, so bind:value={$theme or $language} is properly ...
0
votes
1
answer
1k
views
How to bind a component instance in a type-safe manner in Svelte 5?
I'm following the tutorial provided by the Svelte team in their website!
There is this section in the tutorial that basically explains how we can expose certain functionalities from a custom component:...
- 29
2
votes
2
answers
5k
views
How to Replace Deprecated <slot /> with {@render} in Svelte 5 for Nested Components?
I'm currently upgrading from Svelte 4 to Svelte 5 (using SvelteKit), and I'm encountering an issue when trying to replace the deprecated <slot /> with {@render} in my components.
I'm looping ...
- 1,484
0
votes
1
answer
599
views
Set `body` `background-color` programmatically in Svelte?
I'm making a site using Svelte and SvelteKit, and I'd like to use a predefined array of colors for styling in a normalized way-- if I change one of the values later, everywhere that styles using that ...
- 27
0
votes
1
answer
238
views
Save data submitted from a Form into a Store in Sveltekit
So I've got the following component working so far records/new/+page.svelte:
<script>
import RecordForm from "../../../components/forms/RecordForm.svelte";
import TrackForm ...
- 1,393
-1
votes
1
answer
96
views
Is there a way to maintain information in an iframe when i change tabs?
I have a webpage with several tabs. Inside one of them I include an iframe as a way to manage certain properties, therefore I need the data to be persistent. Each time I change to another tab and come ...
- 1
1
vote
1
answer
84
views
Svelte animated transition after its style is updated from binded properties
I have a Svelte 5 component who's position is calculated according to its size, which depends on its dynamic content:
<script>
import { onMount } from "svelte"
import { ...
- 1,162
1
vote
1
answer
419
views
Display all svelte components in a folder
I have a couple of svelte components in a folder and I wish to display in a single page all the components in that folder.
The only way I've found is creating an index.ts file in that folder and then ...
- 839
0
votes
1
answer
115
views
Is there any way to call the component in same component in svelte
I have a problem in which I have scenario such that recursively same component I want to call in svelte component. They should work like parent and child such like recursively function call.
I have ...
0
votes
1
answer
139
views
Modify parent's footer slot from child
In Svelte, I am using the Modal component.
This component provides the possibility do declare a div with the property slot="footer".
This will keep the footer always at the bottom of the ...
- 659
0
votes
1
answer
194
views
How to narrow types with Tanstack Svelte query?
Problem
I'm having trouble narrowing types with Tanstack Svelte Query. I am migrating my app from React to Svelte.
My query queryGetMyPageCollection() returns either an object PageCollection or false....
- 6,885
0
votes
1
answer
69
views
Conditional Rendering of Contents of Navbar
I am trying to conditionally render different parts of my navbar to the user depending on if they are logged in or not. I initially achieved this by using the onMount function, but it is not ideal as ...
- 57
1
vote
1
answer
107
views
Conditional Rendering in Svelte Based on Server's Response
I am building a web application with Django as the server and Sveltekit on the client.
During the registration process, a link with a token is sent from the server to the user's provided email, when ...
- 57
5
votes
1
answer
70
views
Why does the following event handler work in a Svelte component?
I have the following component Form.svelte:
<script>
export let onDelete;
</script>
<form>
<button type="submit">Update</button>
<button on:click={...
- 150
0
votes
1
answer
667
views
How do I get sveltekit +page.server.ts data into a svelte component?
I have a svelte component that displays a form using https://superforms.rocks and is setup as follows:
routes/
├─ blog/
├── +page.server.ts
├── +page.svelte
├── component.svelte
My experience is that ...
- 929
1
vote
1
answer
894
views
Astro.currentLocale in Framework Components for SSR
I've built an app localized by Astro's i18n routing.
To get the current locale, on server-side I use Astro.currentLocale and on client-side I use window.location.pathname with a helper function that ...
- 579
0
votes
0
answers
57
views
Unable to use firebase in svelte
I am trying to add some code to previous github repo but while using firebase after creating a page in src/routes folder I am unable to use it. Do I have to use firebase compat? As that also didn't ...
0
votes
2
answers
306
views
handle Esc key on form in a A11y friendly way
I have a form in a Svelte app like this:
<!-- markup for editing todo: label, input text, Cancel and Save Button -->
<form on:submit|preventDefault={onSave} class="stack-small" ...
- 64.4k
-1
votes
1
answer
210
views
Switching components in Svelte/SvelteKit not working
I started learning Svelte yesterday as my first frontend Javascript framework, and I've been frustrated trying to fix one problem after another. Today, I have another problem I have been unable to ...
- 57
0
votes
1
answer
92
views
How does the parent component re-execute a function after a Svelte child component changes?
I have a svelte code.I want to implement a function that the parent component re-executes after the child component is updated.
I am facing a problem now.After the child component is updated, the ...
- 31
-1
votes
2
answers
155
views
Binding two number inputs to variables so one input is always bigger than or equal to other
I want to have two inputs:
Input A initialy containing a prop named "min" showing the maximum number possible in inputs
Input B initialy containing a prop named "max" showing the ...
0
votes
1
answer
49
views
Store Component Attributes in a strongly typed array
In svelte, I would like to strongly type an array to match the properties that a specific component exports.
So in the following example I would like const things = [] to know that each item within ...
- 1,767
0
votes
1
answer
51
views
Reactive variable updated from parent and child component
I have a parent component (List) which displays a list of child components (Block). Nested blocks have a button that allows the user to add/remove them to the selection.
The List component also ...
- 501
4
votes
1
answer
1k
views
Invalid configuration found in /Users/nickk/Documents/Pioneer_Frontend/components.json
In the svelte framework I installed Shadcn UI library and installed three of it's components but now when I try to install any other library it gives me this error.
Component.json file looks like this ...
- 41
0
votes
1
answer
860
views
Conditional default slot detection in svelte
I have a svelte component with a default slot and a named slot. I have an instance of that component and use the named slot, and use the default slow inside an {#if} statement checking for a boolean.
...
- 693
0
votes
1
answer
446
views
on:click event not firing from within @error.svelte
I have a SvelteKit app with an @error.svelte page at the root of the /routes folder. Inside of this page, I have two buttons. One is in the header and the other one trigger's a page event when clicked ...
- 243
0
votes
1
answer
88
views
Svelte Checkbox input state does not match to html checkbox state
I am having problems with my custom checkbox component.
My goal is for the parant to have control over the selected state of the input. But every time I click the checkbox it gets selected even if ...
- 1,265
0
votes
1
answer
97
views
I have a question about the svelte radio component
Radio components are being made and used.
However, the input tag cannot be found because the parent page onMount runs earlier than the logic in the component.
Is there any way to disable onMount on ...
- 3
1
vote
0
answers
82
views
Loading Components in SvelteKit for Generic Routes
I'm working on a SvelteKit app where I need to conditionally load one of two components, Comp1 or Comp2, based on server-side logic. Here's a simplified overview of my setup:
+page.svelte
<script ...
- 5,514
2
votes
0
answers
323
views
How to skip initial reactivity for a variable within svelte components?
I have a simple custom component in Svelte, where I use reactivity to execute some code.
<script lang="ts">
export let liked: boolean
$: {
//..code that should be ...
- 31
0
votes
1
answer
352
views
svelte create and pass component as html element
I'm using a library which requires me to create an html element and pass that element. Then the library puts the element in the correct place internally.
The problem I'm facing is that the element i ...
- 821
0
votes
0
answers
545
views
Svelte Component Errors: Cannot read properties of null (reading 'current'), TypeError: unsubscribe is not a function
I have a component that accesses a svelte store writable but the component just gets rendered before the data arrives into the store variable.
This are the errors
enter image description here
I want ...
- 21
0
votes
1
answer
174
views
In Svelte, how can I set the height of a span?
In normal HTML and CSS you would do this:
<span>"Hello, World!"</span>
<style>
span {
background: yellow; /* to see span dimensions */
height: 3rem;
}
</...
- 91
0
votes
2
answers
960
views
Tailwind CSS missing from universal Svelte web component
I've managed to create a Svelte web component that can be used on external websites running on different frameworks.
The final problem I'm having is that Tailwind doesn't seem to be included in the ...
- 1,487
0
votes
1
answer
1k
views
How to compile a Svelte app to a Web Component/Vanilla JS that can be used on external sites?
About a year ago, I created a Vue web component that could be included on any website to facilitate Open Banking payments in the UK. We've even got a WordPress, Magento & Shopify plugins that uses ...
- 1,487