SolidJS

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

SolidJS

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

2/26/2025

props and createMemo

I'm confused. I thought I understood perfectly Solid, and today I stumbled upon a performance issue that I don't understand. I've created a very small and silly example to reproduce it. https://playground.solidjs.com/anonymous/21929a27-2909-461b-87fe-141c7401f23c ...

NB 😈 | Nightly 🦊

2/26/2025

Solid Start Cloudflare-pages deploy returns 404

After building solidstart app I can use it with Cloudflare dev mode but after deployment any requests returns 404. I am able to get static files tho. Dev mode also works. example https://aec52c8e.dex-app-5o2.pages.dev/ my config ```...

gsoutz

2/26/2025

How can I animate an svg element, that already has it's custom transform

I have existing svg elements, that already has a specific transform to display on the corner. But I want to animate these by adding glow, pulsating effect or shock shake effect. What are my options to easily animate them.

jrainearwills

2/25/2025

Parent Get/Set Child Property

Can a parent component somehow set a property or access the property of a child component? ```JSX export function Tab(props: {label: string}){ return (...

luis

2/25/2025

createEffect not re-runing when value in accessors are changed

The createEffect in the print is not re-running when prop accessor is changed, is this some problem to reactivity? What i want is to run the effect everytime the param accessors are changed.

Kehvyn

2/24/2025

Debugging "Error: Can't render headers after they are sent to the client."

I'm trying to figure out how to debug the above error. This happens whenever I hit "Sign Out" on my Supabase Auth + Solid Start project. It's triggered by setCookie in my Supabase server client initialization function. I'm not sure where to start on this one. I've been able to confirm that the problematic cookie is the Supabase Auth Token by logging out the name and the value when it errors: { name: 'sb-<project>-auth-token', value: '' }...

JonathanExcelsior

2/24/2025

How does Solid attach event handlers to DOM elements?

I want to test wether a DOM element has an onclick event handler. However, using the onclick (delgated event) in the JSX component, there is a $$click property added to the DOM element with the event handler and the onclick property is null. Using on:click (native element) on the JSX component, there is no $$click property and onclick is still null. What is the underlying mechanism for adding an event handler to DOM elements? ref: https://docs.solidjs.com/concepts/components/event-handlers Also, as a follow up, how would I test that an event handler is present on a DOM element? I'm currently using Vitest and Testing Library....

Luka

2/24/2025

Routes and fetch requests

I am trying to setup routes the way that whenever user visits "/xelosani/[id]" path they will get the profile page of user and when they visit "/xelosani/[id]/services/all" I want to have new page where user services will be rendered. - Current behavior Whenever I go to path: "/xelosani/[id]/services/all" the createAsync function that I have in "xelosani(details)/[id].jsx" file gets executed going to "/xelosani/[id]" works as expected it works just alright....

Hussein

2/24/2025

<Suspense> not fallbacking correctly

```tsx import { createAsync, query } from "@solidjs/router"; import { Suspense } from "solid-js"; const getData = query(async () => {...

tizu

2/23/2025

@solid-primitives/spring: obtain velocity?

is there some way I can obtain the velocity of the spring? xy: I want to detect if the popup is being dragged faster than x pixels, to then dismiss in a "flick" mode...

tizu

2/23/2025

router: "background" page

Hello everyone, I am trying to recreate this effect. My main issue at the moment is that I need the back button to function as a back button, so I'm not sure how I could do this. specifically, I need to be able to open the route that's in the drawer while keeping the old one in the background, if that makes any sense. I hope the video explains. thanks!...

McBrincie212

2/23/2025

Having The Same Context Transfer Different Properties

im trying to make a base widget, where it has common stuff amongst the widget elements(canvas for now, there will be the reference panel as well) ```jsx import {Context, createContext, JSXElement, useContext} from "solid-js"; export const BaseWidgetContext: Context<BaseCanvasPropertiesInterface | undefined> = createContext();...

snorbi

2/22/2025

Handling loading state

What is the correct way to implement a component that depends on state loaded asynchronously? The component function is executed only once, so I guess that I have to create all effects and memos during that single execution. My problem is that because the used data may still be loading, my code is full of null-checks. It is a top-level component (like a bookmarkable page of an SPA), so I cannot "hoist up" its state. Thanks....

binajmen

2/22/2025

[valibot] Types generic

Hi there ! I'm trying to create a small helper get (then post later). I think you can guess what is the endpoint. ...

Puru

2/22/2025

useDraggable how to make second argument reactive

I am building a draggable library neodrag v3, writing the solidJS adapter for it. I want the usage to look like this: ```ts useDraggable(draggableRef, [...

hyperknot

2/22/2025

How to modify array partially?

I'm using a store to store an array. I'm displaying that array in a For component. What I don't understand is how can I possibly use the "smart" feature of the For component, which only renders the changing part of the array. I mean all I can do in a store is setState(), where I put my full array in. So how can I possible send a partial update to a component? I see no way to push() at the end of an existing array in state or for example modify the last element of the array. What am I missing?...

hyperknot

2/21/2025

Why does my component only update in a dummy For loop?

The component works correctly in the For loop, but doesn't do anything on it's own. ``` <For each={[props.string]}> {(t) => <Item content={t} />}...

noxy

2/21/2025

navigate - Wait for navigation to finish

Hello, I'm reevaluating SolidJS and somehow it started really click in my head. There's one thing that I'm trying to do right now, basically I'm wrapping my whole app with UserProvider and and to expose two 'hooks' useUser and useMaybeUser with the only difference between them being that useUser would enforce that user is present or navigate you to login page. Here's what I came up with for now. ```ts import { useNavigate } from "@solidjs/router";...

Pridgey

2/21/2025

Another `template2 is not a function` issue

Took a look at the other posts mentioning this issue and can't seem to find anything that helps solve the case. I have a Tab Switch component to display different JSX.Elements with. I'm about 98% sure the error is coming out of this component because when I return a simple <h1>Hej</h1> there is no template2 error. I was originally using @kobalte/core's Tabs component, then decided to try and make my own rough tab switch component. Both have produced this error and I'm not really sure how best to proceed or troubleshoot. So any guidance would be helpful....

Joshua

2/21/2025

solid-router causes error: "cleanups created outside a `createRoot` or `render` will never be run"

Hi I am relatively new to solid so I could be making a simple mistake. I recently added solid router to my solid.js project and I am using the config based approach. Since I added the router and using it I get multiple errors like this: - cleanups created outside a createRoot or render will never be run - computations created outside a createRoot or render will never be disposed Since the router is actually rendered inside the render() method of solid, I am not sure what I am doing wrong, any help how to fix the warnings would be appreciated. Below you can see my code (I also uploaded the full files because pasting entire code is higher than the discord message limit....

App.tsx

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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