SolidJS

S

SolidJS

Solid is a declarative reactive Javascript library for creating user interfaces.

Join

Unexpected behavior when dealing with stores (createStore)

Hello everyone, so I have this line of code:
{data.user ? <A href={`/years/${data.user.position || "fy"}`}>Begin studying</A> : <A href="/login"><FaBrandsMicrosoft /> Login</A>}
{data.user ? <A href={`/years/${data.user.position || "fy"}`}>Begin studying</A> : <A href="/login"><FaBrandsMicrosoft /> Login</A>}
It works perfectly but when the user logs out (user sets to null), they get this error in the console:...

<style/> inserted above the component (unwanted)solidstart SSR

use "sass": ```css @use "sass:math"; @use "colors"; @use "mixins";...
No description

Registering API Endpoints on SolidStart

Hi everyone! I’m exploring ways to programmatically register API endpoints in SolidStart without relying on FileRoutes. My goal is to fully control the paths manually instead of using the file-based routing system. I know it’s possible to do this using a middleware like so: ```ts...

Pattern for "sticky" searchParams?

I have searchParams that I would like to be "sticky" over route changes? I know I could use the current searchParams to contruct the href for many of the links on the page, but I'm wondering if there is a common pattern for this? Thanks....

How to use query.set (prev cache.set) to mutate async data for optimistic updates?

i’m trying to use the undocumented query.set to mutate async data for optimistic updates. it works for async data from createAsync that’s reactive to param change. however, when i manually revalidate the data (either by calling revalidate somewhere, or revalidating from an action), it fetches fresh data rather than using the query.set i called earlier when should i use query.set if i’m going use revalidate() in order get the data? calling revalidate is the only way to get the data as my query isn’t reactive to a param change...

Why submission result doesn't update?

In the component below, it appears that submission does not update when the action does not return anything. ```tsx import { action, useSubmission } from "@solidjs/router"; import { Show } from "solid-js";...

How to type the context from the docs example

Using the example from here I'm trying to get it working in TS, but TS doesn't seem to understand <CounterContext.Provider and throws all kinds of errors. Does anyone know how to make this work? ```ts...

Error Boundary does not catch errors of the resource

Hello, I have a resource created and access it inside a suspense inside an error boundary, but if the resource throws an error, e.g. no network, then the error boundary does not catch this and the suspense fallback gets displayed. Why? ```tsx <ErrorBoundary fallback={ErrorFallback}> <Suspense...

Child Component not Re-rendering

So I have this code ```tsx import { createEffect, createSignal, onCleanup, Show } from "solid-js"; import { invoke } from "@tauri-apps/api/core"; import Weapon from "./weapon/Weapon";...

Client side navigation does not render a page

I am using FileRouter and I have a page in this file:
/routes/items/(view-item).tsx
/routes/items/(view-item).tsx
...

In a File Route how to make it ignore the parent layout?

I have set a default layout at the root. Some url paths need an empty layout though. How can I escape from the root layout and override it or make it use an empty layout?...

How to make a map?

So I want to have a map on my website, first when I thought about this I made a google api based map which obviously requires funds and its not useful for my case, then I searched little more and came to openstreetmap, postgis extensions that allow us to export map data into it which later we will query, currently I am on debian distro, In my head what my approach should be is: 1. download data and export it to postgres database with postgis extension enabled and indexed automatically I had this done before so I know how to do it kind of...

how can I see console.log output in Solid Start server actions?

I have an action like this: ```tsx const myAction = action(async function myAction(formData: FormData) { console.log(formData.get("image"))...

Need help debugging this error: Client-only API called on the server side. Run client-only code in

My solid start project works fine in dev mode, but when I try to do vinxi build followed by vinxi start I get the below error: ```bash npm run start ...

My solidstart app just hangs if I use process.env on any place

I'm having weird problems with my solid start app, like the page loads, no error from the terminal or browser, but it was like the javascript code does not run at all, no logic is executed, for example: I have a login page with two fields, and use @felte/solid for validations and initial values, everything works until I import the following file on any of my files: `import { z } from 'zod'; const schema = z.object({ API_BASE_URL: z.string().url(),...

Changing baseURL based on production and window.location.href

I have an API calling function that builds URLs like this: ${baseUrl()}/api/[...]. The baseUrl function looks like this: ```ts...

useTransition not working

Hello , I am trying to utilize useTransition but Im not sure if I am doing anything wrong or haven't understood how it works. ``` import { createSignal, useTransition } from 'solid-js' export default function Counter() {...

Route for error 500

How can I make a route for error 505 in solid start? I made a file [...500].tsx

How to better handle resource errors when component is instantiated outside of the render function?

Hello, merry (early) Christmas! I have a somewhat unorthodox application with an SSR entrypoint that currently uses renderToStringAsync() to render an application. In hindsight, it was obviously problematic, but at the time, I was tearing my hair out trying to figure out why my application was having an internal error....

Canvas Lags

```jsx function generateTransparentBackground( canvasBackground: HTMLCanvasElement, individualPixelSize: number, c1: string, c2: string, canvasWidth: number, canvasHeight: number ) {...