SolidJS

S

SolidJS

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

Join

No clear answer for "computations created outside a `createRoot` or `render` will never be disposed"

I spent 5+ hours today reading about, running experiments and trying to find out exactly what warning message:
computations created outside a createRoot or render will never be disposed
actually means, but there is no definitive info. I get this message for some global createMemo, as well as expression inside the <Title> component. Global createMemo scenarios...

Can't use binary dependencies in api endpoints

Hi, i'm currently using the "@node-rs/argon2" package in a trpc api being exposed as an endpoint via solidstart, and when I try to build the app, I get the following error:
ERROR [commonjs--resolver] ../../node_modules/.pnpm/@node-rs+argon2-darwin-arm64@2.0.2/node_modules/@node-rs/argon2-darwin-arm64/argon2.darwin-arm64.node (1:0): Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
ERROR [commonjs--resolver] ../../node_modules/.pnpm/@node-rs+argon2-darwin-arm64@2.0.2/node_modules/@node-rs/argon2-darwin-arm64/argon2.darwin-arm64.node (1:0): Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
Is there some way I can specify "@node-rs/argon2" as an external dependency to not be bundled, and just manually include it in node_modules in my (node22) docker image?...

Proper methodology for creating UI Component Library for SSR?

I'm looking to create a simple UI componentl ibrary for use in my solid-start projects. In some of the components I'm utilizing client only API for sake of better component functionality (utilizing setTimeout for determining a long press for example). This obviously causes hydration errors in solid-start unless I wrap the component in clientOnly I can't seem to export client only components from my library, as solid-start doesn't seem to recognize them as client only, even though I export them wrapped. I could create a layer in my solid-start application where I import it from the library and wrap them in clientOnly() there, but that feels weird. Is there a "right" way to do something like this? Some industry standard I'm unaware of? Happy to hear all opinions....

classList causes unnecessary re-runs (but createEffect or HTML text in the same spot doesn't)

I found myself in a situation where classList specifically seems to cause unnecessary re-runs. In the following code, createEffect only reruns when fst() changes (I manually examined w.fsts). Similarly, HTML text re-runs only when fst() changes (I only get one render for ${i} for the element, which was updated. Yet, every single change of any element (executionState()[i]) I get classList for ${i} for every single of my tests(). I don't understand why, especially considering that classList and HTML renders are right next to each other. ```tsx <Index each={tests()}>{(t, i) => { console.log('Test render:', i);...

Solid Start on RPi 4 Gives Illegal Instruction

I recently started using Solid Start and am really enjoying the experience, but when I tried to deploy my website to my home server (just a Raspberry Pi 4), both building and running the dev server result in the following crash immediately after printing out vinxi v0.5.8:
zsh: illegal hardware instruction (core dumped) npm run build
zsh: illegal hardware instruction (core dumped) npm run build
...

Change `query` cache lifetime

Is there any way to change the cache lifetime of a query in Solid? I am trying to speculatively preload page data, but the preload operation is often >5 seconds before the page might actually be loaded, meaning the query cache expires.

Solved: Vinxi `getRequestURL` forces SRR even when wrapped in `isServer` / `import.meta.env.SSR`

```ts import { isServer } from "solid-js/web"; import { createForm, Field, Form } from '@formisch/solid'; import { getRequestURL } from "vinxi/http"; ...

Using 'createMemo' inside JSX (to render things which are only available in sections of UI)

I am trying to figure out how to createMemo for information, which is only relevant to some sections of the UI (which are rendered conditionally). Top-level (typical) createMemo will crash because the data based on which I'd like to compute it is not available in the entire component (but it is guaranteed to be available for some sections when those sections pass conditional rendering). Self-contained example Gist: in case array() is not null, we'd like to display UI about it, which includes its sum in two different places. Challenge is to do it without double-computation and code-duplication....

Properties not reactive with dynamic

I have this code (in brief). ``` const elementProps = createMemo(() => { return {...

js_jsx-runtime.js?v=848ce2cb' does not provide an export named 'Fragment'

I built a component lib and bundling it with tsdown, this is my config. ```js import { defineConfig } from "tsdown"; ...
No description

Understanding action return values

My understanding is that actions that don't return any value are automatically cleared. When I look at the code, it seems that when an action returns a falsey value, it should also be automatically cleared. However, I don't see this happening in practice. Consider the following code: ```tsx import { query,...

Looking for a way to build a library components with Solid + Vite

I'm looking for a way to reuse SolidJs components in different projects. Currently the starter template of Vite only offer a website solution. In Vite, it has library mode, but it doesn't seem like an ideal solution for multiple entries. Let's say 50 entries should be enough to think about an automatic solution right? (Moreover, the rollupOptions config part confuse me badly) So I hope that you guys could show me a easier way or share me any repo already did it so I can learn from them. It doesn't have to stick with Vite all the time (but I appreciate the Vite dev mode though) Thanks in advance...

Value isn't updating

I'm working on a browser game with Excalibur.js and Solid, and most of it is working as expected. But this one nested value, while definitely changing, isn't updating in my <For> component. I've tried using an <Index> as well, but the value doesn't update either way. The currentHP outside of the For loop does update, but the values in the For do not. Can someone help me figure out what I may be doing wrong? ```ts...

attaching dynamic component to render pipeline via shared state

Hi there 🙏 — I’m working on a setup where I want to dynamically “plug in” components at runtime, controlled by shared state, without tight coupling between the components themselves. I have a central state (e.g. { current: "StepA" | "StepB", data: {…} }) Multiple components (StepA, StepB) are mostly independent – they don’t import or reference each other...

entry-server.tsx does not run when ssr: false

is this a bug or intentional? if intentional, why? ```tsx import { createHandler, StartServer } from "@solidjs/start/server"; export default createHandler(() => {...

handle add sum

@JavaScript here is a support post for your question

Error in server side preloaded query crashing dev server

Whenever an error is thrown in a preloaded server side query in one of my routes, it crashes the dev server. It also is not caught by any error boundary. I found #399, which appears to be a similar issue. I am not sure whether that issue has simply reappeared, or it is erroring because I have misconfigured something (I am on the latest solid/solid router/solidstart versions).

SolidStart Hosting a Static Site

Hello! Was wondering how I might be able to go about hosting a static site in SolidStart. My main purpose is to use auth.js inside my SolidStart app to host built documentation. Does anyone know of any ways to do this? And/or if this is even a good idea?

Solid Start v1 when vinxi is 0.5

I just want some clarification regarding the solidstart versioning where solid start has been versioned 1+ suggesting it is somewhat ready to be used for development meanwhile vinxi on what solidstart depends on is itself not yet mature and stable. For example my websocket endpoints that worked on 0.4.3 are not working correctly in 0.5. Is the stability only guaranteed for solidjs related functionality or there are no stability guarantees as of yet? I understand that the websocket issue is upstream to vinxi in nitro: https://github.com/nitrojs/nitro/issues/2171 . However as a developer my efforts of implemeting the websocket endpoint and then loosing that functionality upon upgrading in the future seems like behavior of an unstable API instead of the stability indicated by version numbers of solid-start....

Clarification on "use server" comment in SolidStart

"use server" comment only has bearing on query and action functions, right? but how do I avoid bundling the functions that get called inside those HOC functions? example, all my "use server"-ed query functions import the function sql from a lib/database.ts adding "use server" to the sql function doesn't have an effect? if it doesn't have an effect, how do i prevent accidentally bundling the sql function into the client bundle if I, on the off chance, import it client-side? realistically tho, that won't work bc the env vars won't be available client-side. but then there's other issue of unnecessarily adding extra size to the bundle....