SolidJS

S

SolidJS

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

Join

i18n and context issues

Hey folks, I am currently migrating to the 2.0.0 release of @solid-primitives/i18n. (https://github.com/solidjs-community/solid-primitives/tree/main/packages/i18n#readme) However I have a few questions:...

Difference between `setState` and `produce`?

I have appState as a store, and I'm trying to pass appState.selectedTable as a prop to a child component. When I simply use setAppState, it doesn't trigger a prop change in the child component. I've found that I need to use produce for it to work. The problem is, the documentation only gives a one-liner about the produce API. Could someone provide more information on how to properly use produce and createStore in this context?
No description

Solid Start not deploying on vercel in turborepo

Hi all, my solid start project doesn't deploy to vercel, aka every build fails. There are no error's though, the build fails, because the deployment duration takes over 45 minutes. ...

Problem duplicating a component navigating with dynamic routing

I am having difficulty causing a route component to be duplicated when navigating between a dynamic route in an Electron/SolidJS application using the SolidJS Router. Example route def: ``` <Route path="/search" component={Search}>...

How to solve ts(2322) error on "each" attribute of "For" component

I'm trying to render items using the built-in "For" component for solid but I keep getting the following error: ``` Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'. Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)...
No description

How to make array key in resource from useRouteData reactive

I'm noticing that, if the resource that is the return value of useRouteData is an object, then its keys will mostly be reactive -- but if the key has an array as its value, that key will not be reactive Example: ``` const data useRouteData(); data().name // reactive...

createResource from the main layout causes it to completely crash the page

I have a dashboard.tsx main layout file and 2 routes inside this dashboard route, and inside this layout I have these resources ```ts export const routeData = () => {...

Rendering Solid inside another app

I work as a web developer maintaining an organisation's web portal. The portal is quite old - it's built using ASP.NET MVC 5 and Knockout, and features a lot of custom architecture. I'd like to make moves towards upgrading it to a more modern framework (and while I've picked Solid for that we may settle on something else in the end), but we have only a very small team and it's a large project - too large to port it all over to a new framework in one go. To that end, I've been experimenting with getting it to a point where we can at least use Solid to design new pages. Our app works via a wrapper (containing a search bar and banner and so on) around a swappable module running a hash-based, file-based router. I've written a webpack config and rewritten the wrapper logic so that we can write pages in conventional, modern Solid, and then the app will dynamically import and render them when appropriate. The issue is that to do this, I'm having to export the render function from solid-js in every root component, and then use that imported render function to render the component, and store the disposal function it returns to clear up the page once it's unloaded. I have tried numerous ways to get Solid's render function to sit in the wrapper that goes around the swappable modules, so that the user doesn't have to keep downloading the same render function every time they go to a different page, but in every attempt I've made, it's rendered correctly, but then when the disposal function is called, it doesn't actually dispose of anything - intervals continue to run, components rendered in a portal aren't disposed of, and all signals and effects continue to track. This is obviously undesirable, and I wanted to understand what's going and how to properly use the render function to render Solid within another application. What's going on and how might I get it to work better?...

Testing state update after api call`

Hello I am trying to test a register user component and I want to show an error message if I get an error from the rest api. Getting the element fails even after state is updated. This is to submit the user register form ```js...

onMount vs createRenderEffect

Hello everyone! Could someone explain the difference in practice and when to use each of them? Thanks...

how to handle responses from the server on the client?

I'm trying to implement server side auth with a cookie, the cookie part it's working, but the thing is I want to save my user info - that is returned by the login function (name, avatar, etc) - in a context in order to use it across the app. How do I go about handling the response on the client in order to properly set it in the context ?

How can I achieve server side rendering in solid

is solid start ready for production usage

404 for dynamic routes

I'm trying to implement this: https://start.solidjs.com/api/HttpStatusCode#setting-a-404-status-code-for-missing-pages-for-dynamic-routes My route data looks like this: ```js export function routeData({ params }) {...
No description

Best Practices for Unrepresentable Intermediate State

Hello, I am looking for some opinions regarding best practice in the following situation. Lets say I have a model which contains properties and some of those properties can only exist in tandem e.g. blood pressure which are usually two values. To encode this in the model the two properties are grouped into an optional property. ...

when using <Portal /> on shadow mode, on change events are not working!

Hello, when using Portal in shadow mode I have some weird issues, onchange events are not happening, as a result I cannot type anything or programmatically invoke onchange. The host of the web component is react. Any ideas why this is happening, does this happen because of react and needs some sort of adapter to map react events into solid's web component?...

Vitest 0.34.4 caused `You appear to have multiple instances of Solid`

Hi peeps, I recently upgraded vitest from 0.34.2 to 0.34.4 and it starts showing for every single test: ``` stderr | unknown test You appear to have multiple instances of Solid. This can lead to unexpected behavior....

Cannot use tRPC infinitequery in SolidStart app

We (me + @pupbrained) have a solidstart app bootstrapped with create-jd-app, using trpc, prisma, zod, and solidquery. We have a component that hits our api: ```js import { For, Match, Show, Switch } from 'solid-js' import { queryClient, trpc } from '~/utils/api'...
No description

Safari solid crash

In 16.6 I notice that solid can fail silently in my site using it with Astro + solid. It appears to be iPhone specific and solid specific. Other pieces of JS execute successfully. Does anyone else have a site that I can test a Astro solid+integration with? Or have any idea how I can get it to throw an error?

Astro + resolvePackageJsonExports: false

I have a Solid project that I am moving to Astro to get access to SSR. It uses lucide-solid for icons. Astro was giving me grief about that lucide-solid import saying: ``` Could not find a declaration file for module 'lucide-solid'. '/Users/anthony/project/node_modules/.pnpm/lucide-solid@0.274.0_solid-js@1.7.11/node_modules/lucide-solid/dist/esm/lucide-solid.js' implicitly has an 'any' type....