I’m new to Svelte (and Web Dev as a whole), and I’m trying to change the value of a store from another page. The value of the store is shown on the first page, while there is a button to change the value from a separate page. However, when I hit the button, it does… Read More Svelte Stores are not updating value when updated from another page
Currently working on my first SvelteKit project. I have created a "+layout.svelte" file which uses a navbar and footer component from my lib folder. When I add content to a page, it’s currently overlapping the navbar. +layout.svelte <script> import Nav from "$lib/nav.svelte"; import Footer from "$lib/footer.svelte" </script> <body> <Nav /> <Footer /> </body> <slot></slot> <style>… Read More CSS outside of '+layout.svelte' applies to its components
I’m struggling with the latest version of SvelteKit, the docs available only works with SSR, and I’m developing SPA app (static page), so, what is the way to pass data from my +layout.svelte to +page.svelte?. The documentation says that with load function from page.js (I’ve already set the SSR=false, and I understood that page.js is… Read More SvelteKit: Pass Data From +Layout.svelte To +page.svelte SPA (static) application
I know user’s preferred language in cookie and I am able to init locales with it (using server hook). And I would like to also render correct lang attribute which matches selected locale. >Solution : There are docs on specifically that. If your content is available in multiple languages, you should set the lang attribute… Read More How to set lang attribute on <html> tag in SSR mode with SvetleKit
I have a form that is passing a string to a search page that uses that string to query an API and display results. When I submit the form, the URL is x/search/string?slug=string. I am looking for a way to keep the URL cleaner and have it be x/search/string. My form code: <script lang="ts"> let… Read More Dynamic Route Params from Form Submit
I have this line of code in src/routes/+page.svelte import {PUBLIC_SUPABASE_KEY} from ‘$env/dynamic/public’; When this builds on CI, I get this error: @cozemble/frontend-main-app:build: RollupError: "PUBLIC_SUPABASE_KEY" is not exported by "$env/dynamic/public", imported by "src/routes/+page.svelte". @cozemble/frontend-main-app:build: at error (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/rollup@3.9.1/node_modules/rollup/dist/es/shared/rollup.js:1967:30) @cozemble/frontend-main-app:build: at Module.error (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/rollup@3.9.1/node_modules/rollup/dist/es/shared/rollup.js:12962:16) @cozemble/frontend-main-app:build: at Module.traceVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/rollup@3.9.1/node_modules/rollup/dist/es/shared/rollup.js:13345:29) @cozemble/frontend-main-app:build: at ModuleScope.findVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/rollup@3.9.1/node_modules/rollup/dist/es/shared/rollup.js:11826:39) @cozemble/frontend-main-app:build: at FunctionScope.findVariable (file:///Users/mikehogan/repos/personal/cozemble/monorepo/node_modules/.pnpm/rollup@3.9.1/node_modules/rollup/dist/es/shared/rollup.js:6687:38) @cozemble/frontend-main-app:build: at ChildScope.findVariable… Read More Typescript error with Sveltekit environment variables: RollupError: "PUBLIC_XXX" is not exported by "$env/dynamic/public"
I’ve got a <div> which is toggling between translate classes like so: <div class={`w-96 fixed top-16 bottom-0 left-0 transition-transform -translate-x-${show ? ‘0’ : ’96’}`}> And Tailwind is just not applying this style, and I don’t understand why. The class is added to the element, but not the styling. The styling for all the other classes… Read More Tailwind CSS not adding translate styling
Is there some way to show a ‘lost connection’-esque screen when/if the user loses internet connection or, at least, connection to the website using SvelteKit, similar to how YouTube’s ‘There is no connection right now’ screen? I imagine it would require some kind of socket to poll connection, and I was also wondering if this… Read More SvelteKit: On lost connection?
json returned from a Sveltekit actions is garbled. I would expect something like this: { foo: bar, foo2: bar2 } But instead I get this: Array({ foo: 1, foo2: 2 }, bar, bar2) Which is even more annoying with nested data. This is how I send it: const response = await fetch(‘/api/fetch’, { method: ‘POST’… Read More Sveltekit Actions returns garbled json
What am I missing, why is "jackpots" empty in the fixData function? let jackpots = []; let networks = []; let games = []; async function getJackpots() { if(browser) { const res = await fetch(`/api/jackpots/5`); const res2 = await fetch(‘/api/networks’); const res3 = await fetch(‘/api/games’); return { jackpots: res.ok && (await res.json()), networks: res2.ok &&… Read More Having issue understanding JS Promise chaining