Questions tagged [svelte]
Svelte is a component framework — like React or Vue. On-topic questions include code using Svelte and how to configure it and use it in your javascript pipelines.
3,547
questions
0
votes
0
answers
11
views
Why does the icon in this Astro/Svelte component flicker on refresh?
<script lang="ts">
import { onMount } from "svelte";
let theme = localStorage.getItem('theme') ?? 'light';
let flag = false;
onMount(()=>{
flag = true
}...
0
votes
0
answers
19
views
Fetch files from outside of SvelteKit project directory
I'm fetching data, including media file links, from a Django API.
Project structure as follows:
-backend (Django)
-core
-media
-frontend (SvelteKit)
-src
-lib
-node_modules
Both ...
0
votes
1
answer
17
views
Why cant this Astro/Svelte component access the document element?
<script lang="ts">
let theme = localStorage.getItem("theme") ?? "light";
const handleClick = () => {
theme = (theme === "light" ? "dark&...
0
votes
0
answers
15
views
Svelte debugging typescript errors
I am building a small application in svelte. I used vite init and selected the svelte option, and set "dev:true" in my vite config. I also have installed the svelte devtools browser ...
0
votes
1
answer
15
views
convert firestore data to string to display, in inner html
I Want to display my data in this <p> element but I don't know how. I can get it and then console log it but that's it right now, I got it to display document id but when I go further than that ...
0
votes
0
answers
10
views
How to add image to nodes in Cytoscape
I'm using Cytoscape.js and Svelte to display a graph. I currently have my graph displayed but I want to add an svg image to the background-image of each node.
I've tried a few situations but currently ...
1
vote
1
answer
23
views
Dynamically load a template in a Svelte component
I'm not entirely sure if this is possible, but I want to dynamically load a component's template in runtime in Svelte. Basically download some user-defined template and use that to build out the ...
1
vote
1
answer
19
views
Svelte dynamic routing: passing extra parameters with goto
The end goal is to be able to use the item name in the URL and pass the id to the component.
Currently, I'm using a table that shows a list of items. When the user clicks on a row, it will go to the ...
2
votes
3
answers
38
views
Assign variable inside .then in a map function
I'm trying to assign a variable inside a .then function but I don't know how to do that in svelte store. I know that its a promise and takes some time to be assigned.
Here is the code.
The map ...
0
votes
1
answer
18
views
Svelte SMUI full screen dialog without content
The examples from svelte dialog
gives examples only for fullscreen dialog when the content fills the space. But I would like to use a select with many options that requires the full screen so as the ...
1
vote
1
answer
32
views
Buttons stop working when I add new div element
I am using sveltekit, typscript, and tailwind for this. Ok, I have a website that I am making and I have buttons that have no background and are formated like this:
When opened
- Label
stuff
when ...
1
vote
0
answers
14
views
How to make FreeCodeCamp Test Suite work on Svelte
I have successfully created markdown-previewer on svelte but whenever I click ‘Run tests’(from CDN: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js), it logs
bundle.js:584 Uncaught ...
0
votes
0
answers
25
views
FETCH for uploading folder with multiple files DOES NOT ABORT when I close the Tab
I'm trying to implement a multiple file loader in my web app, i.e. I want to upload to a given path in my local machine a folder with multiple files in it.
I'm using Svelte for the frontend part and ...
1
vote
1
answer
48
views
How can I fix getting the error window is not defined
How can I fix getting the error window is not defined when using firebase in my sveltekit project I cant put it on mount because of other reasons and am trying to get around it? any ideas or is there ...
0
votes
1
answer
20
views
Svelte Store update
I'm having a hard time understanding how to update my store in the same file in which it's defined. I have the following store definition:
export const myStore = writable({
myList: [],
...
0
votes
0
answers
20
views
Svelte Dockerize "Failed to load module script" in production
I have a svelte app running on my production instance, but when I access it I see a blanc HTML page. On my console I get the following error:
Failed to load module script: Expected a JavaScript module ...
0
votes
1
answer
14
views
How to use web workers with svelte and esbuild?
I'm following this tutorial on how to use web worker in svelte but I'm getting an error
https://publish.obsidian.md/kometenstaub/50-Programming/Esbuild+web+worker
Svelte file Codeblock where I use ...
0
votes
0
answers
20
views
How do I fix not sveltekit not finding db outside of on mount [duplicate]
How do I fix not being able to use db in my async function the underline gets removed in vs code when I remove the firebase initialization outside of the onMount but then it doesn't work because it ...
1
vote
1
answer
28
views
Use reactive Variables Between Components in Svelte
I have a question regarding using reactive variables from component3 in my example in component 2. I have two checkboxes in component2 and I am having a reactive array that I want to use in component ...
0
votes
1
answer
24
views
Popup popping up under div html, svelte, tailwind css
I'm trying to make a website using svelte and tailwind. I made a little popup that pops up when you hover over the home icon. But when I later added a div it pops up under the div and does not show ...
0
votes
1
answer
15
views
Sveltekit standalone endpoint issue
I am trying to set up a standalone endpoint and then loop through it on a svelte page.
The console says it doesn't recognize "phones" as an object but when I log it out it looks like an ...
0
votes
1
answer
19
views
how to pass date variable to graphQL call in svelte?
I have a graphql file with a date in ISO format. I would like to pass a variable instead of hardcoding the date. I would like to use Date.toISOstring() or some get current date method.
GRAPHQL FILE
...
1
vote
1
answer
21
views
Is there anyway to mutate values in the svelte store as the client?
I'm currently building a site using Svelte.
A thought crossed my mind in a security perspective.
Is there anyway to mutate the values of the Svelte store as the client?
If so how and with what tools?
0
votes
0
answers
21
views
Inject Imports with Vite
I am using Vite as my build tool for a svelte frontend application.
Some of the libraries I am using are Node.js modules that require the Buffer module. To provide the Buffer functionality, I am using ...
0
votes
3
answers
28
views
Clear input field in svelte after form submission
I'm struggling to find a way to clear form inputs after submission. I should mention that this form is in a Modal. It posts to Supabase correctly, I just can't figure out how to clear the input fields....
-4
votes
0
answers
39
views
How do I make a hero in Svelte? [closed]
I want to make a hero component in Svelte with the background being completely an image and hero text in the center. I used the styles and HTML code from the w3schools howto but the result doesn't ...
0
votes
1
answer
23
views
Svelte Reactive Value with Typescript Type
I'm trying to get a timestamp from a Date object in Svelte and TypeScript. I want the timestamp to update whenever the Date object is updated, so I'm trying to make it reactive. Here's the code I ...
0
votes
1
answer
38
views
How do I handle reactive async fetch input field errors?
I have a store binded to an input box which re-fetches some data after every input, but when I either delete all the values in the input or set the input to outside of the bounds of what the fetch can ...
0
votes
2
answers
40
views
Svelte label class gives me "A11y: A form label must be associated with a control."
So I'm building a drop-down select menu in Svelte
<script lang="ts">
export let label: string;
export let options: any[] = [1, 2, 41, 6];
export let fullWidth: boolean = ...
1
vote
0
answers
44
views
API request blocked by CORS policy with Confluent Cloud and Kafka
I'm trying to post a message on a Kafka cluster on Confluent cloud. It works fine on Postman, but when I try on my Svelte app, I got this error:
Access to fetch at <ENDPOINT> from origin 'http:/...
0
votes
1
answer
19
views
Can't understand how reactivity and stores work
I'm trying to understand how reactivity should work, but I cannot figure out why some things work how they work.
Svelte REPL with the code: https://svelte.dev/repl/aa0821cd95c54708b2d12a05bf74577e?...
0
votes
0
answers
23
views
HTML Ajax form not working with FormSubmit co API
I'm using Svelte and Astro. And I'm using formsubmit.co for the API to send the email. But it doesn't send the email.
Here is the js
<script>
import { onMount } from 'svelte';
import jq ...
0
votes
0
answers
30
views
Preventing reactive block from running when component RE-renders in Svelte
How do you prevent component re-render from running the reactive code in the component?
For example, say this is component A.
<script>
$: {
// Some reactive code with some dependencies (...
0
votes
1
answer
57
views
how to play two files simultaneously in nativescript audio?
I'm using svelte-native which uses nativescript under the hood.
I can't figure out how to play two mp3s at the same time using two instances of the player
AudioPlayer.svelte
<label text={link.Title}...
0
votes
1
answer
23
views
Svelte strongly type class of components
I am working on a component library that has a bit of a twist on how components are grouped. I am grouping components into classes to make using the library simpler for end users. Rather than ...
2
votes
1
answer
21
views
How to apply mouseover function to component in Svelte
I have the following elements:
Parent.svelte
<script>
import Child from './Child.svelte';
function handleMouse(){
}
</script>
<Child on:mousedown={handleMouseDown} on:...
3
votes
1
answer
53
views
Firebase hosting using SvelteKit
I have created a svelte app and building app using SvelteKit everything is works fine.
I tried to deploy this app in firebase hosting but it fails. Sveltekit generating production build under .svelte-...
0
votes
0
answers
18
views
How to change storybook base URL
does anyone know how to set up a different base URL for storybook? when you run "npm run storybook" it opens up on http://localhost:6006/, how can i get it to open up on http://localhost:...
0
votes
0
answers
15
views
Conditional render with svelte kit for protect routes with token of sessionStorage
Im trying to generate a conditional render for protect routes with token. But i have the problem that when i enter the route with token first, for one second, is rendered the error page.
Code:
<...
-1
votes
1
answer
38
views
Capture value from an input with svelte
I'm trying to capture the value of an input using the svelte framework
<script>
var name = document.getElementById("#name");
var valueName = name.value;
function showName(){
...
0
votes
0
answers
24
views
Error in Vite Preview: Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
I'm facing this Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data error when using vite preview after vite build.
My vite.config.js:
import { ...
0
votes
1
answer
22
views
how to solve "user.getIdToken() is not a function" error coming from a file I didn't create
So I have a simple project with sveltefire (svelte + firebase). I can sign in, I can sign out and I can create an account. In the component to create an account, I have these lines of code:
...
0
votes
1
answer
27
views
Correct way of changing svg image in svelte
In svelte, I have the option of switching between two images, or using css to change the color of the svg image. Which is "better/ best practice"? (also we use tailwind css).
<div ...
0
votes
0
answers
52
views
Why does my Android Webview app with a Hls.js video player freezes after 3-4 hours?
Im at the breaking point with this error. I developed a svelte webapp with an hls.js video player which I packaged in an android webview for Firesticks. The App works great except for one odd issue ...
0
votes
1
answer
32
views
Does the command vite start have some advantages over node ./index.js
I'm launching a new SvelteKit app for production and came across the vite start command.
I'm always starting the app with node file.js.
Does the vite command have extra advantages over basic node?
I'm ...
0
votes
1
answer
28
views
Web App (Svelte): How to divide screen in distinct sections
I am creating a program calculating flow in piping systems. In the user interface, the program contains a graphical drawing diagram, a ribbon on top of the screen containing functions helping the user ...
1
vote
2
answers
30
views
Static file on static folder not cached
I'm using sveltekit and trying to load static assets like css/js on my localhost, but it didn't cached like disk cache or memory cache, how can I resolve this? it should be cached by default right?
......
-2
votes
0
answers
21
views
How can i generate css file for each svelte page
I need to generate css file for each svelte page
I am using sveltekit
And Tailwind
And need to build static pages
0
votes
0
answers
19
views
Force bundle to fail if there are any TS errors from svelte components
I've done a lot of researching how to correctly set-up Svelte with TS and Rollup bundler.
So I've done the whole implementation and everything works fine, but I'm not really happy with the thing that ...
1
vote
1
answer
33
views
How to display as much as item fit in one line and if all don't fit in show the number of remaining item
I have just started learning Svelte. I want to display as much as email fit in one line and show the remaining emails with a number like this: https://imgur.com/ro8eTPM
I want achieve this without ...