SolidJS

S

SolidJS

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

Join

Client renders in dev mode, but not once built

Hi I'm new to solid and I'm making a simple app with solid start. When I use npm run dev it works fine and I can build and debug as expected. When I use npm run build then npm run start, the client does not render my index.tsx page, but the server does indeed work as expected. I am not using any ssr in my vite plugin config. Not sure what's going on as most of it is as generated by the solid start template, and seems to match the docs. I'm assuming it's not an issue with the file structure as it works fine in dev mode, and remains unchanged from the template. package.json important parts...

Good practices in SolidJS

Are there any tutorials which go in depth of what are good and bad practices when building apps with SolidJS? As someone who has no prior experience with reactive libraries I sometimes have hard time understanding if what I'm doing is good or bad practice and maybe sometimes I might be reinventing the wheel or not using SolidJS as intended. So, if there are any tutorials you could recommend on how to properly use SolidJS please let me know. Or just share general recommendations, really want to l...

Variable initialized in `onMount` becomes `undefined`

```ts let positionMenu: () => void; onMount(() => { positionMenu = getPositionMenuFun({ inputElement, styles });...

Cannot build on server

I have a server (debian bookworm) and my local PC (Arch) My site (https://github.com/someaspy/duckduckno.com) cannot build on my server, but can build locally. I get the error ```
vite build "-v"...
No description

Solid-Element Custom Elements Manifest

If I'm using the Solid-Element library to generate web components, is there a way to generate a custom elements manifest?

What's the SEO situation like with solid?

As far as i know MPA is better for SEO but I've not been able to find any information on it. As I know SolidStart is still an SPA. can anyone help out?

Can't start the server with https enabled on Start

I have a certificate and I changed the vite.config.ts to use it by adding
server: { https: { key: './key.pem', cert: './certificate.pem' } },
server: { https: { key: './key.pem', cert: './certificate.pem' } },
to it but it only works for dev and not when I use build & start....

Jest, TypeScript, and @solidjs/router

I set up my project with Jest & TypeScript according to https://www.solidjs.com/guides/testing#jest-with-typescript-ts-jest and while it seems to test simple components well, as soon as I try to test a component that uses imports from @solidjs/router, jest chokes. I tried reading the documentation linked in the error, but I didn't see anything obviously wrong. Do I need to set up additional configs for @solidjs/router or is there a bug in that package? Here's a piece of the error: ``` Details:...

Any pattern to avoid getting ts angry when using route data fields?

I am using routeData returning an object with 2 fields from it. When I use a combination of <Show> and <For> tags to display my data and try to access any fields TS complains even though the code works. Atm I can mark the "clans" const as ':any' to avoid this but I feel that is not right. Is there a correct pattern I could follow to avoid this?
No description

Is there some equivalent to <Portal/> that is also compatible with ssr?

I want to make a persistent modal dialog, and for that i need the <Portal/> component from solid-js/web, but obviously it doesn't work, because it's in the solid-js/web package

Recommended way to track the setter of a signal?

Currently, my solution involves wrapping the setter with a function. Playground: https://playground.solidjs.com/anonymous/cae5fd4e-3505-42f3-84a2-af62cc5b2d91 I am aware of createEffect(on(...)), but it may be excessive to create multiple effects solely for target signals. With that in mind, what would be the recommended method in this case?...

Is it possible to pass paramters a function wrapped by a createEffect/createMemo?

,I have a certain function in my component which I have noticed runs multiple times since I am referencing the function multiple times in my JSX. I found that the recommended way to alleviate this problem is to wrap the function in a createMemo. However my function requires some parameters which are passed to it through its calling context. So is there any way I can pass parameters to a function wrapped by a useEffect or useMemo?...

Is it possible to implement LiveViewJS type functionality using SolidJS + SSR?

Specifically, simple example would be : an Observable (for example from rxjs or S.js ) keeps updating on the server based on an external source (e.g. pusher channel, counter etc) and the webpage keeps updating in a declarative manner.

Need to pass a function as a dependency to the solid js web component.

Hello I have made a web component with solid and I need to pass a function as a dependency to it. I know that web components props are serialized and accepts only primitive values like strings and numbers. In my previous experience with web component I used stencil and you could declare a method as public so that you can invoke it from the host application. ...

Adding components that use context to the DOM after mount

I have a component (ShelfScene) that returns a mapped list of items (Shelf). The ShelfScene component appends a few Shelf components onMount and those render and use context fine with no issues. However when I try to append a new Shelf component after mount the new component is not able to read the context. Any Ideas?

Fetching data with authorisation token

I’m using auth.js with cognito and my backend requires the authorisation token to be present with every request. I’ve managed to get this working by using createServerData$ and then passing it to a generic GET function that will retrieve the token from the request. Is this the best way of doing this? I’m struggling to create a wrapper around createServerData. I have a dashboard of components that each hit different endpoints, my thoughts were to have them handle their fetching themselves but it’s a lot of duplicate code with createServerData each time. Has anyone else had a similar problem?...

For loop in route breaks when form in another component is submitted

I have this <For> loop in a route. Works fine.... UNTIL..... There is another component I can use from the route that displays some search results. As soon as I submit the form in the search component I get this error message: note is undefined...
No description

input elements become empty upon hydration

If I load a page developed using solid start on a slow connection, and enter some text in an input element while the javascript is still downloading in the background, the input element becomes empty as soon as the hydration kicks in this is a very frustrating experience, is there any way to fix it?...

Missing Http method returns 200 status code on api route

I am trying to generate API routes. In the docs I read that 405 is returned for non existing routes but when I create one let's say /api/logout and only define a DELETE method , if I call put on it it returns code 200 and html. Is this correct or have I missed something? Do I have to define all the methods I do not use and return 405 on them myself? /api/logout.ts code below ```ts import { APIEvent } from 'solid-start/api' ...
No description

Why does (return new Response(({'error' : ""}), {status : code})) not work

return new Response(({'error' : "No ID provided"}), {status : 500})
return new Response(({'error' : "No ID provided"}), {status : 500})
...