Newest 'svelte' Questions - Stack Overflow

Questions tagged [svelte]

Svelte is a radical approach to building user interfaces. Instead of shipping a JavaScript library to the browser, Svelte compiles your code into tiny standalone modules that'll try to make the browser do as little work as possible.

0
votes
0answers
14 views

Cannot get D3.js to work inside Svelte component (with Rollup)

I've been trying to put the most basic D3 example into a Svelte app and can't get it to work. At first I tried installing D3 as a node module: npm install d3 but this produces the same result (a lack ...
1
vote
1answer
12 views

I'm having trouble loading a Svelte table

There aren't any vanilla examples on creating a datatable for Svelte. I've found a couple examples that I'm trying to learn from, but still a no go. Right now I'm trying to build it on the REPL tab ...
0
votes
1answer
16 views

What is the best way to add custom JS functions in a file into Svelte app?

What is the best way to add a JS file into Svelte app? I will add custom javascript functions for authentication with Auth0 and I am trying to do the easiest way using Svelte architecture. Any ...
0
votes
0answers
12 views

UnhandledPromiseRejectionWarning: Error: Cannot find module 'svelte/compiler'

I am trying Svelte 3 but it's throwing an error when running. I have tried two simple configurations mentioned below but they don't work. Module svelte is installed both locally and globally. Module ...
2
votes
1answer
31 views

How to target more than one dom element with same class to mount a svelte component

There are 2 parts to the problem i am facing I am trying to mount a component on two divs with same class name but the svelte component is loaded on the first target element. When i append an element ...
-1
votes
0answers
17 views

How to set defaults to component reactive fields every time I show it up? #svelte [on hold]

I'm building and presenting reactive array of objects where every new object is built out of reactive input values that I have in separate modal component (values are wrapped into a single object and ...
1
vote
1answer
42 views

Svelte/Sapper.js - How to initialize store with localStorage data?

I come from a React background but I'm switching to Svelte and Sapper for my next application in order to fight the massive bundle size that comes with React these days. However, I'm having trouble ...
2
votes
1answer
21 views

Error while mounting a component on a div instead of a body

I am trying to mount a component on a div element using document.querySelector('.widget') but it throws an error main.js looks like const app = new App({ target: document.querySelector('.widget')...
0
votes
1answer
14 views

Implementing reusable lifecycle behavior

I'm trying to implement reusable lifecycle behavior in svelte components. The idea is to implement a module to perform something when lifecycle methods of a component occur. This module would then be ...
1
vote
1answer
37 views

Style slot elements from parent component

I would like to have a component apply certain styles to the elements that get passed in the slot property. Example: Component.svelte <style> h1 { color: blue } p { color: grey } </...
2
votes
2answers
44 views

Styling a {@html…} tag of a Svelte component by ising the in-component <style> tag (Unused CSS selector)

I am trying to add some styling to an HTML tag rendered inside of the {@hml...} tag of a Svelte component, but it appears that it only inherits the parent's styling (the container of the {@html...} ...
0
votes
1answer
34 views

How to use locally built Svelte 3 compiler in locally running Svelte REPL site?

I'm playing around with Svelte and cloned it from its Github repository. I can run the REPL from site directory, but it uses Svelte from unpkg url. I would like to try my locally built compiler and ...
0
votes
1answer
33 views

What is the equivalent of attributechangedcallback() in svelte 3 or how to reload my component when i change it's property

I make an app with a nested component, the app call the component when i give an input, the input is the URL and that's the component property, now i can make the http request and i have my List, but ...
0
votes
1answer
40 views

How can I fix “sessionStorage is not defined” in Svelte?

I'm new in Svelte and I'm trying to set some info into sessionStorage but it is throwing "sessionStorage is not defined". I realised that I received this error because it's running on the server side. ...
1
vote
1answer
63 views

Svelte Each function in Nested Json

I have nested JSON Array let car = [ { name: "BMW", detail: [ {name: headlight, type: flame}, {name: taillight, type: spark}, ], }, { name: "Merced Benz", detail: [...
0
votes
0answers
69 views

How to attach client-side event handler to a slot in a Sapper component?

I'm exploring the standard svelte-sapper template and I want to add a button in the Nav component that will excute some login logic. I also want to separate the button's presentation and logic so I ...
0
votes
0answers
21 views

Idle until urgent, a queue for improving render sense of speed using Svelte?

Let's say I have a Svelte 3 SPA (single page application) and a router (svero, navaid, svelte-routing, universal or else). When I move from one page to another Svelte is very fast, but when there are ...
1
vote
1answer
77 views

How to properly change state value of array of objects?

Imagine this variable: let myArray = [ { name: "animal", value: "", }, { name: "fruit", value: "", }, (...) ]; ...
0
votes
0answers
15 views

Unable to import the SQLite3 Node package in either Svelte or ReactJS

I'm trying to build a Svelte and React app with an SQLite database on the background, but I am completely unable to achieve the step of even requiring the sqlite node package as both frameworks throw ...
0
votes
1answer
41 views

Can you include a Svelte Component in a ReactJS project?

I have just started to study Svelte. Just curious to know if you can import a Svelte component into a React project. A small hello-world example would suffice.
1
vote
1answer
65 views

How to persist svelte store

Is there any direct option to persist svelte store data so that even when the page is refreshed, data will be available. I am not using local storage since I want the values to be reactive.
0
votes
3answers
87 views

Import css in node_modules to svelte

I want to use css framework in my svelte project, in this case it was uikit. I had install it with yarn add uikit And of course i have to import the css file, with @import '../node_modules/uikit/...
0
votes
2answers
36 views

Best way to group different stores in a main object - Svelte

So I've been trying out a bit of Svelte for the last past week. I wanted to have some simple component, let's say a counter that will be managed by a store (the same way it is shown on the API ...
0
votes
0answers
37 views

How to preprocess both the components CSS and global styles using Rollup or Webpack in Svelte Compiler?

I believe there is an option to use a preprocessor in svelte config nowadays. But I have not managed to do it successfully yet... (Guess the community could use a working example both with Rollup and ...
2
votes
0answers
83 views

Webpack config for svelte/sapper with typescript and scss support

i just cant wrap my head around it, no matter how hard i try to find any help on discord server or official docs theres nothing about it. for example here is my react webpack config: const env = ...
1
vote
1answer
32 views

Reactive statement throws an error once it hits undefined variables. How to prevent it?

just playing around with Svelte. And I have noticed that when the reactive statement ($) is being calculated, it will throw an error when one of the depending variables is undefined. While this ...
1
vote
0answers
42 views

now-cli deployment doesn't build package.json dependencies

I'm trying to deploy a Sapper built application via @now-node. The task is basically to deploy a Polka server with dependencies and to serve static/ and client/ files statically. I have managed to ...
0
votes
2answers
69 views

Can't use `svelte/animate` to make a list item fly into a header

I'm trying to get a material design style thing where the location name would fly into the header. It seems that Svelte can't figure out that the two things are connected. demo: https://svelte.dev/...
1
vote
1answer
70 views

Dynamically loading component using import or fetch

Is there a way to import components in svelte dynamically using fetch or import? May be a svelte file or module file created from shareable component (still don't know how that works). very new with ...
1
vote
1answer
44 views

Creating Svelte component which I can import from node_modules later

I'm learning Svelte right now, and I have one thing that I cannot understand. I can create a component with just a file with .svelte extension, and loader will make all the rest (for example, '...
0
votes
1answer
48 views

How to make device detection with SSR in Svelte/Sapper?

I need to detect user device (browser, os, etc.) and show different navigation according to the device type (mobile or desktop). It should work during SSR in Sapper/Svelte. Any help with it is very ...
1
vote
0answers
47 views

How do you create routes with optional parameters in Sapper?

Let's say I have a /foo route. But sometimes people hit /foo with a language parameter: /fr/foo. And other times they might hit it with a language and a country: /ca/fr/foo So I need a routing table ...
1
vote
2answers
57 views

Break iteration (each) in Svelte?

Is it possible to break iteration in Svelte or limit like in angular (ng-repeat="items in item | limitTo:4")? For example: {#each items as item, i} ... {#if i > 4} {:break} <--- break ...
0
votes
0answers
29 views

How to embed vega-lite in svelte component?

I tried to use the simple example to make a vega-lite embedded graph in a svelte component. I get vegaEmbed is not defined. I have installed vega, vega-lite and vega-embed via npm before <script&...
0
votes
1answer
80 views

Accessing generated Custom Element in Svelte 3

I'm using Svelte 3 with the option to generate Custom Elements with Shadow DOM but I can't figure out how to get a reference to the wrapper Custom Element (HTMLElement) so that I can attached event ...
0
votes
0answers
38 views

Is it possible to create custom directives in svelte?

I know there are slots and some discussion about slots without DOM elements. What about custom directives? (That is, special "atributes" that will modify the behavior of a component/DOM element)
0
votes
1answer
48 views

Exporting Separate Custom Elements from Svelte Components

I'm trying to find out if it's possible to export each Svelte component as a separate Custom Element (with Shadow DOM) in its own js file (with imports for any child elements - i.e. dependencies aren'...
0
votes
0answers
27 views

How can I encapsulate svelte app within iframe of svelte app?

A svelte app targeted for mobile will be emulated online (a mobile drawing with the actual app rendered inside). Because of media queries (which don't work since the app is the whole page and not just ...
1
vote
0answers
53 views

Can I import packages into a Svelte Component?

I'm trying to write a front-end for an app that I've built. Having just learned about Svelte, I thought it would give me reason to explore the framework further. The Svelte boilerplate that I use ...
1
vote
1answer
47 views

Button click handlers with arguments

What is the recommended approach for passing an argument to a svelte button click handler? The use case is a repeating button inside an each list. From what I can tell the documentation only shows ...
0
votes
1answer
140 views

Cannot access 'variable_name' before initialization

When using reactive variables by declaring them using the $: syntax, you get the following error. Cannot access 'variable_name' before initialization Here is the code: App.svelte <script> ...
1
vote
1answer
76 views

How to process css with postcss inside sapper-template with rollup

Having trouble using rollup-plugin-postcss with sapper-template: npx degit sveltejs/sapper-template#rollup my-app npm install rollup-plugin-postcss --save-dev install various postcss plugin create ...
2
votes
1answer
126 views

How to import Firebase only on client in Sapper?

I'm importing Firebase into my Sapper application, I do not want the imports to be evaluated on the server. How do I make sure imports are only on the client-side? I am using Sapper to run sapper ...
0
votes
1answer
67 views

Can I use React components in Svelte?

I am really new to Svelte, but cannot find answer to my question anywhere. I am trying to use this React component in Svelte: https://developer.microsoft.com/en-us/fabric#/controls/web/stack (I guess ...
1
vote
1answer
58 views

How to handle prop updates in lifecycles?

If a parent component updates the value of a prop it passes to a child component inside a lifecycle, how can the child use the latest value of that prop in its own lifecycles? Here's an example where ...
0
votes
1answer
62 views

Deconstruct “on:change” event in Svelte 3

I have multiple input elements that I deconstruct an object onto like such. <script> const settings = { value: '', class: 'input'}; </script> <input {...settings} /> <input {....
0
votes
1answer
79 views

How to hold off rendering until ajax call completes

I am refactoring a React app that loads the language labels from a json file on the server. The data is pulled from the server using an Ajax call, which updates a store that contains all the language ...
1
vote
1answer
80 views

What is the concept behind svelte compilation?

I went through your article https://svelte.dev/blog/virtual-dom-is-pure-overhead and few other blogs but they are explain how svelte is better when compared to virtual dom. Whereas what I wanted to ...
1
vote
1answer
92 views

ReferenceError: document is not defined in Svelte 3

I'm trying in the <script> to manually document.createElement and then to appendChild an audio every time an eventListener is called to replace it. Everything works fine in the browser, apart a ...
0
votes
1answer
58 views

Svelte - changing a bound value in a click handler doesn't seem to update it

I have a simple demo app of binding an input using Svelte. This works, but during a click handler on that same element, I wish to reset the bound value. Specifically I have bound an input to ...