SolidJS

S

SolidJS

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

Join

Unable to find modules

Hey guys, new to solidjs and SSR frameworks in general. I'm testing out a solidstart template generated using a community tool called "Create JD app". This allows me to quickly spin up a boilerplate project similar to create-t3-app. The problem is that I'm facing this runtime error: ``` An error occured while server rendering /:...

Loading screen for app

I'm a bit out of my depth with this question but essentially, I've got a Solid app running on embedded devices which in some rare cases have really poor wifi so the initial load of the page takes a long time without the user getting feedback on what's going on. I've been contemplating two solutions: one where I add a loader in JS that loads the solid app (but here the problem is that I don't quite know how to integrate this with Vite and everything) or one where a small part of the Solid app loads first and then the major part load later. I much prefer the second solution but then I run into the problem that I do not want all components lazy loaded individually (because the app might lose wifi later and then the available functionality depends on what parts the user have visited). I want everything else to be loaded as a single chunk if that makes sense. It seems like this might not be possible but I wanted to pose the question just in case. It is quite possible that I'm going about this entirely backwards so please let me know if there's some alternate solution I'm not thinking of : )...

Does Solidjs have its own tanstack query?

I do know that tanstack query supports solidjs, but to me, it seems solidjs tanstack query don't really have that much features

TypeError: Cannot read properties of null (reading 'push')

I'm a bit clueless about what is causing this, except the project produces this error in the client bundle when built, but not in development. https://e264c050.ticket-counter.pages.dev/...

encapsulating logic that uses refs?

Hi, so I'm porting a react app that does something like so (eliding lots of annoying extra details): ```tsx function useMyCustomHook(ref) { useEffect(()=>{...

How to allow updating of elements instead of destroying and rendering the elements?

I have an array of 100 objects and an div is rendered for each object. Whenever the array changes, a new set of 100 divs are rendered for the new objects. How do I make it such that there are always 100 divs and whenever the array changes, the contents of these divs are changed instead of the divs being re-rendered (destroyed and created). I'm doing this to improve performance and user experience...

How is a Context reactive?

The tutorial states that
Using Context has the benefit of being created as part of the reactive system and managed by it
Not sure if I'm understanding this correctly. When trying to trigger reactivity, changing the context value does not seem to be re-rendering the app. ...

setState - typescript : Argument of type 'string' is not assignable to parameter of type 'never'

Receiving the following error:
Argument of type 'string' is not assignable to parameter of type 'never'
Argument of type 'string' is not assignable to parameter of type 'never'
for the line:...

Error boundary wont catch error

i have /services/[service_id] that fetch service information from graphql server which will throw error when theres no service information on that id. i wrap the component with error boundary and suspense but when i go to /services/blablabla (which doesnt exist) it doesnt show error boundary fallback but an renderString timeout, here are the error:
No description

Lazy named import?

I have code that depends on an async function for data, and thus I need to await it. Making a dirty hack to adapt an async function to a sync component via signals was a much simpler thing to make than what I am about to explain. I have an async component: ```ts async function Settings(): Promise<JSX.Element> {...

clear canvas from a parent component

hi i'm trying to make a game with solid + html canvas i want to be able to draw/clear the canvas from a parent "game" component (the "game" component should manage basically everything) how can I do that (if the "game" component idea is bad, let me know and what I can do diffrently please)...

How to defer rendering a component on server side in solidjs

I am using astro with solidjs, How can I defer rendering a component I know that there's lazy but it doesn't work server side, meaning I need to defer rendering at server side and then display something when it has loaded,...

Resetting state in child component

I have a form that takes default values as a prop. But the default values can change when a different dataset is selected in the parent, in which case I want to reset the form state and provide new default values. In React, you could use key for this, but that doesn't exist in Solid. Is there another solution?

Testing conditional rendering in child component

Hi, I am trying to test a particular interaction in my component. I have two components, let's call them Parent and Toast. Toast is a child of the Parent component. ...

mark module or just variable as secret to stop being bundled into client

with colocation I have accidentally bundled stuff into the client that should only be on the server twice now is there a way to mark a module or variable as secret so that when the bundler tries to bundle it into the client, it instead errors out at build time?...

Undocumented Hook useAssets ?

Whats this hook in SolidJS useAssets, Its not even documented Its being used in SUID https://github.com/swordev/suid/blob/main/packages/styled-engine/src/createStyle.tsx#L81 Could anyone explain...

Test component with useContext

I have a component that has useContext() to ask for a context which is created all the way at the top in index.tsx. When I only render the component in my test the index.tsx is also rendered leading to issues like that there is no html etc. I have now fixed this issue by warpping the component in the test with its own provider like so: ```...

What are these solid-js/html, solid-js/h and solid-js/universal?

I found these solid-js/html, solid-js/h and solid-js/universal in SolidJS package. I would like to know what are these, and can I use these for production? Are there have any documentation to learn these?...

parent of nested routes

Hello. Just looking for confirmation. I'm using Supabase Auth and that logic lives in RouteGuard. I'm pretty sure that all the routes nested within will be password protected. My main question is: am I configuring the Index component correctly? Will I be able to access it? If an unauthenticated user goes to '/' (or any of the nested routes) they will be navigate('/login'). I seem to be having an issue accessing '/' as an authenticated user. Should I rename the route for the Index component to someting like '/home'?...

Where Do I Put Providers In SolidStart?

In a SolidJS project you name your providers in index.tsx by wrapping the <App /> component. ` render(() => ( <Router>...