SolidJS

S

SolidJS

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

Join

Any way to redo this logic without an infinite loop?

I have a page where I'm getting data from a createAsync and then dynamically rendering this in a <Show/>, however, to get the data to get guaranteed instead of possibly undefined I have to use the render prop, which goes into an issue shown here: https://github.com/solidjs/solid/issues/1149. Essentially I cannot use a <For/> loop inside this, as I get an infinite loop - I have to use an <Index/> loop. Is there some other way to do this pattern or am I basically stuck using <Index/>? T...
No description

Solid Start Vinxi complaining about public and can't resolve public fonts

When I define my font faces and reference the actual font files like so:
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
url("/fonts/open-sauce/OpenSauceOne-Black.woff")
It does not complain but when building it will state it can't resolve it....

Solid Start HMR not rebuilding styles on class change

Use tailwind 4.0, change class of JSX component while dev server is running, HMR reloads component but tailwind is not rebuilt to actually style the class How could I fix this? In vite config?...

Why is this code not reactive?

I have a TextField component that passes down information via context. Picture shown below. I am using @felte/solid as my form library. I'm trying to set validationState based on if there is an error in that specific value, however the code (show below) is not reactive and I'm not totally sure why. errors() is reactive and errors().scenarios seems to be reactive, and the div with the Errors: {errors().scenarios?.[i]?.name?.[0]} seems to work fine, so I can't totally understand why the vali...
No description

Best Practices for Handling Errors in a query-Wrapped Server Function

Hey everyone! I’ve been working with SolidStart and have a question about error handling and display strategies for server functions wrapped in a query. The example below is inspired by one of the official SolidStart examples: ```ts export const getUser = query(async () => { "use server";...

How to use server function & suspense

I will be frank, I have some experience with React but this is my first dive into Solid coming from Astro I'm trying to have a fallback loading component, that is replaced by data fetched from the server when available I figured the best way to do this was an asynchronous server function, I am not claiming there is a bug I think I just did something wrong Here is my high-level code since I can't really share more: ```jsx...

Have anyone gotten ts particles to work in solid?

https://github.com/tsparticles/solid I've tried implementing the example they give, but it does not work....
No description

Old client after server update

What's the best way to handle an old client trying to request an asset or API that no longer exists after the server has been rebuilt and redeployed? The current behaviour of my SolidStart app is that the client crashes and in my <ErrorBoundary> I have a fallback that shows a link that takes them back to the web app by doing a full page reload (I make sure to have target="_self"). Ideally, I'd like to be able make the client automatically reload the page if it detects the server has been updated. If it could do this page reload during a navigation most user's would hardly notice it. Thanks....

Seeking Insights on SolidStart Server Function Issue

Hi everyone! I've encountered a strange behavior in a SolidStart project involving server functions and page refreshes. I've detailed the issue, steps to reproduce, and provided a demo repo and code examples here: GitHub Issue. If anyone has insights or suggestions, I'd greatly appreciate your input!...

How to set up a vite dev proxy with Start and Vinxi?

I am trying to figure out how to migrate a dev proxy for api requests in solidstart. I have a working config just for a normal solidjs app which looks like the following in vite.config.ts ```javascript import { defineConfig, loadEnv } from "vite"; import solidPlugin from "vite-plugin-solid";...

solid styled starter template(solid-start) bug

It is showing the whole style tag in browser along with applying it. I have attached the screenshot too.
No description

useParams not updating with urql's createQuery

Currently refactoring a svelte project to Solid. I'm unable to get params to update inside the createQuery() call when you change the dynamic path (ie same route but different fst), which uses urql's solid library. I've tried multiple different variations of making params reactive and none of them seem to work. As you can see in the svelte snippet there, I had to make it derived state so it would update, but the equivalent of const derivedParams = () => params doesn't seem to work. Any thought...
No description

Suspense not getting triggered although I am accessing the result of createAsync in my components

``` <Suspense fallback={ <div class="flex-1 items-center justify-center"> <DottedLoader color="#999" from="checkout suspense" />...

How to share async data inside a context

I'm currently refactoring a website from Sveltekit -> SolidStart. I'm currently working on the layout for our dashboard As you can see in the sveltekit layout, I request some data via a graphql client I wrote that is then available that is then available in the load for any child routes as a typed object. Very nice feature. Obviously you would do this with a context in Solid. You can see the code I currently have which gets the data for the sidebar, based on https://docs.solidjs.com/guides/fetching-data#calling-multiple-async-events, but it's not currently set up to have that data be in the context. I tried refactoring the createQuery (urql/solid package, under the hood it's basically a createResource) to be inside a context but it didn't seem to want to be reactive. Any knowledge of how to do this correctly so that it updates when the data is loaded/I don't have any hydration issues? The context documentation only showed examples with local state....
No description

onLoad event doesn't trigger

Hello everyone. I ran into the issue, that the onLoad event on an <img> does not trigger. Here is the code in question: https://stackblitz.com/edit/github-a9ukgq-25tgxa?file=src%2Fpages%2FHome.tsx,src%2Fcomponents%2Fcomp.tsx,src%2Fcomponents%2Fcomp.css...

Getting UnhandledPromiseRejection in Solid Start server function that stops dev server

I have an async function in my Solid Start app and am receiving the following error message whenever it returns an Error. ```ts UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "#<_Response>". at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)...

Question about actions + cookies

I'm currently trying to port over our company's website from Svelte 5 -> Solid, and I wasn't sure how to replicate this picture in an action. setCookie needs an event to be passed in, and as far as I can tell there's no clear way to get the event. I already tried getRequestEvent and that returned undefined, so I'm a bit stuck with how to do this. Would I have to do this in an API route only? Sveltekit also has those but I didn't have to use one for this, you just get the request and cookies...
No description

"Issue Handling Query Parameters with Slashes (/) in SolidStart URLs".

"I’m building a SolidStart application, and I’m encountering an issue with handling URLs that contain query parameters with slashes (/) in their values. For example: http://localhost:3000/organizations/45 works perfectly because it uses path-based routing. http://localhost:3000/organizations?o=1/45 does not work as expected since this is exactly what i want. It seems like the / in the query parameter ?o=1/45 is being interpreted as part of the path instead of part of the query string.the url gets updated in the url search bar of my browser but the page does not update. - I tried encoding the / in the query parameter as %2F, so the URL becomes http://localhost:3000/organizations?o=1%2F45. However, this still doesn’t work....

@solidjs/router not working

Please can anyone help me out, i have been stuck for days... as i have this issues
No description

createSignal vs createStore

When should createSignal be used instead of createStore and vice versa? If I want to store an object in state, for example: ``` const user = {...