SolidJS

S

SolidJS

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

Join

Post CSS with Solid Start

I have one question. Does someone know to include Post-CSS in Solid-Start project? I use SCSS and I would like to make the bundles smaller by analyzing the .tsx files. My files use scss like so....

Impossible to build fresh Solidstart

I have "TypeError: Cannot read properties of null (reading 'push')" on every build I make with Solidstart. I tried multiple official templates and no one is working. I'm using pnpm & nodejs v21.4.0 on macOS...
No description

Solid MotionOne, how to animate presence in list (using For)

I'm trying to animate additions/removals of a list, but am running into problems. I have this code: ```import { type Component, For } from "solid-js"; import { Motion, Presence } from "solid-motionone";...

SolidJS Stores + SortableJS - Weird update bug at runtime | but data is correct.

I'm not sure how to best explain it so here's a video~. The code is actually pretty easy to follow (Thanks to SolidJS's stores primitive, it's amazing). I've learned a lot of best practices with Solid since then when I picked up SolidJS in May 2024. I'm running into another roadblock that's testing my knowledge. Anyone know how to maybe fix this? Or what the reason is? I'm already using reconcile. I'm thinking it's because SortableJS seems to perform updates on the DOM elements outside of SolidJS's knowledge so maybe it's just what it is?...

minified UI library package code calling undefined map

Hi, I have a lot of apps I want to make this year, so figured I should make a UI library for myself so I don't have to make a button or footer or what have you for each app. I am pretty good at the computer, so not daunted, but I'm getting this issue I can't quite figure out on my own and jippity is not helping lol....

Wrapping SolidStart: JSX is an unknown file extension

https://stackblitz.com/edit/sb1-k8bui6zy I am trying to create my own CLI to wrap around SolidStart CLI (Vinxi) to make a sort of meta-SolidStart framework. I kept running into problems with my project so I successfully re-created the errors in the stackblitz link above. I left some Readme files inside the packages to clarify what I'm trying to do. I want to use my custom CLI to control Vinxi, so I setup a CLI tool to run this code as a proof of concept: ```js...

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 ...