SolidJS

S

SolidJS

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

Join

How to wait for the value from a useAction?

I am using useAction with a server action, but when I call the action it is returning a Promise, how do I wait for the Promise and display the result?

How to create effect for each element of mapArray?

Hello, I'm exploring reactive patterns, and I'm stumped on how to create effects for elements of the result of mapArray. What I've got so far: ...

Vite + SSR, CSS not loading correctly

Hi, I'm trying to implement SSR with vite and solid.js. I followed this guide: https://vitejs.dev/guide/ssr and used this repository as example to follow: https://github.com/bluwy/create-vite-extra/tree/master/template-ssr-solid There seems to be an issue with hydration and css and I'm struggling with it. The setup is the same as the repository linked above, same server.js and same entry-client.jsx and entry-server.jsx just with my setup. My current code and website screen is in the attachments. I'm also receiving a lot of warns about hydration in console....

Context uses default value instead of one passed to provider

Hi! I've just started a new project using solid for the first time. as someone that comes from the react world, using context with createSignal seemed practically the same to me as in react, so I made a simple context to try it out....

How to define layout for index page?

I am looking to define a shared layout for some pages, according to the docs it seems like you would do something like this, and it does work if you are navigating manually to the page, but clicking links to the pages show an error "Failed to fetch dynamically imported module" where its trying to find "/routes/about.tsx" instead of "routes/(home)/about.tsx" Is this a bug, or is there is another way to do it?...

Route Intercepting

Good Evening, I was trying to create protected routes within my app on the server side via entry-server, and it was working until I noticed that when I added ({ forward )} within the createHandler as seen below, it stopped running that function on every route and only did it on initial page load. ```js export default createHandler( ({ forward }) => {...

Build a Drag & Drop Designer with Solid

I have a major project at the moment. It's about building a designer for documents (mostly DIN A4 / US Letter - but also labels). What is the best way to build something like this with SolidJS? With a drag & drop functionality, snapping & co. ...

How to set size of child element?

I have this component: ```jsx export function NavigationBarItem(props: { icon: JSX.Element }) { return <div class="m-4 h-8 w-8">{props.icon}</div>;...

Deploying vanilla Start Beta2 to Netlify fails, edge function crashes

Trying to get a base Solid Start build deployed to Netlify, by actioning: - pnpm create solid@beta - pnpm install - Add netlify.toml, with build.publish of /dist - Ensure vite.config sets start.server.preset to netlify_edge...

Newest Router... Error about missing the wrapper Router component

This is more of a curiosity question for me... I just updated to the newest router. I'm using Solid... not Solid Start... I have an App component that had my routes in it. All of the Route components were wrapped in the Router component and the App component was default exported. ...

Solid Start Getting Started example not working

I followed the guide at https://start.solidjs.com/getting-started/project-setup , I used pnpm. Also tried it with bun and yarn. Also happens in a fresh docker container. When I run the dev server and load the page in my browser, the site is displayed, but does not work (the basic template click counter). I also get this error in my dev console: ...

`vinxi dev` command crashes when used with bun

Hello, i am playing around with a side project i created using solid start and when i tried to run vinxi dev using bun, it threw this: ` ERROR Transform failed with 1 error: 3:15:42 PM <stdin>:6:10: ERROR: Expected ")" but found "class" <stdin>:6:10: ERROR: Expected ")" but found "class" at failureErrorWithLog (node_modules/vinxi/node_modules/esbuild/lib/main.js:1649:15)...

Using "use server"; But My Code Is Still Showing On Client. Why?

I'm trying to implement the new "use server"; comment to force parts of my code to run on the server. But it doesn't appear to be working. Here's an example. I have a AuthService.ts file that uses Supabase Auth. I'm trying to force the "delete user" code to run on the server. Here's the code: ```...

component doesnt react to changes in state

I've got a component that has a state collaborators which holds an array of objects. The problem is that when this state is modified, through setCollaborators function, the component does not update for the new value. why is this happenin, and how can I work around this issue? ...

Subscribe to patches for a store ?

Hello, I was wondering if there is a good way to subscribe to a stream of patches from a solidjs store. I am primarily looking for something similar to what MobX provides (also immer)...

Is there any recommended bundle tool for developing with solidjs?

May I ask, are there any recommended bundles for developing with Solidjs? Recently, I found a tool called "Rspack"

How do you disable HMR in Solid Start?

I am using Solid Start beta 2.

[Middleware] Confusion around onBeforeRequest hook

Hey team! I'm playing with the latest version of Solid start and noticed something that might be me, misunderstanding the doc. I'm having a middleware onBeforeResponse that is supposed to check the response content type and if it's HTML, modify the body to add some stuff in the <head> tag (think about a CSRF token for example). To do so, I'm using the hook onBeforeRequest. This hook gives me access to an event param and a response param. The response is empty, no body, no headers, nothing. If my hook just returns the response that was given, my site breaks. ...

I'm having trouble with `session.data` being undefined

Starting from the with-auth example, user_id is sometimes undefined when e.g. refreshing the page. ```tsx const session = await getSession() const user_id = session.data.user_id ...