SolidJS

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

SolidJS

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

7/11/2025

What is the idiomatic way to create a universally reusable solidjs component library?

By universally i mean the code should at least be able to be imported both in the browser and in nodejs, not necessarily be able to render everywhere (that would be up to the app to solve, ie for ssr). But I don't want the app to crash just because I happen to import something from the library in ie. node. Some questions I have: - What does a typical package.json look like? - Should the package export two different builds: dom and ssr, or can a single universal build be exported? ...

Syed Samar

7/8/2025

Server file being bundled on the frontend and env variable is undefined when used via process.env

I am facing an issue in solid start where my server file marked as "use server" is being bundled with the frontend code and I am unable to access node/server related code and getting errors in the chrome console. For testing this issue I created a basic "bare" solid start project. Created a src/lib folder with 2 files server.ts and index.ts (image attached). app.confg.ts (image attached as well). The error that I get in the console is "TEST_ENV_VARIABLE is not set" as the proces.env.TEST_ENV_VARIABLE is undefined. Also if I comment this error check and console the count value on the frontend then I get this error (see attached image). All these errors are due to server code being bundlede on the frontend....

hyperknot

7/8/2025

Async in onMount OK?

Is the following pattern OK? ``` export const AppUI: Component = () => { onMount(async () => {...

kai

7/7/2025

ai-sdk for solid (createMutable)

Is this implementation correct, following the svelte and vue implementations? replaceMessage doesn't seem to work as no signals on chat.messages are ever triggered on updates. ```ts import { createMutable,...

ColbyD

7/6/2025

Express, SolidJS, and Solid Router- SSR Troubles

Good afternoon! I am scaffolding a new project that will use SolidJS for the front end, Solid Router as a router, express as my backend. I want to isomorphically render this app taking advantage of all the benefits of SSR. I am using webpack as my bundler, and have achieved server rendering and client side hydration. However, when trying to implement Solid Router, I am plagued by an error of attempting to use Client Side features on the server. I have tried soooo much to find a workaround, even investigating using TanStack router, but I would really like to just use SolidRouter as it is simpler and the native router for Solid. I will share a link to the github repo for my project so far, and if anyone has any advice as to how to set up routing that works with SSR, I would be more then happy to hear your thoughts. Thank you! https://github.com/colbydeniston/yart.git https://github.com/colbydeniston/yart...

deminearchiver

7/6/2025

Is there an idiomatic way for creating dependency injecting components?

For context, I am developing a UI library (not necessarily headless), and I want to give users the ability to customize how certain inner workings of components (e.g. things that normally would be incapsulated, such as inner elements of components) render. And following are the examples. Context-based approach...

snorbi

7/5/2025

Possible solidjs bug?

I have a problem with Kobalte (https://discord.com/channels/722131463138705510/1385724185070010458/1385724185070010458) but based on this comment it may be a solidjs bug: https://github.com/kobaltedev/kobalte/issues/542#issuecomment-2816878081 Should I report it, or is it really a Kobalte problem? Thanks....

zhengkyl

7/3/2025

Get intended URL a "use server" query is called from

I have a query that gets a user's info and redirects if they aren't logged in. I want add a redirectUrl parameter to the login page and return them to their intended url. Using the referer header works if I visit the URL directly, but for client-side navigation using a <A> or navigate() the referer header is from before the navigation completes. Currently, I am passing the path as a parameter to the query. Is there a better way to do this? One small downside is since the query is called with different keys, the cached value isn't used. Mainly I'd like to avoid manually passing the current path everywhere I use the query....

7/2/2025

Expose a Function Outside of Component

I'm working on improvements to @solid-primitives/virtual, namely support for dynamic item sizes and fixes to broken reactivity. I implemented a scrollToItem utility function that is now returned from createVirtualList. This works perfectly fine if you are just using the headless virtual list. However, there is a VirtualList component that abstracts away the HTML boilerplate required for createVirtualList to function. For convenience, I would like to expose the scrollToItem function for use outside of VirtualList. Problem is, I have yet to find an idiomatic way to accomplish this after searching around for a bit....

gsoutz

7/1/2025

How to sync two different signals inside a store maybe

I have an array and an index to the array defined separately as two signals, here I've demonstrated: ``` import { batch, createComputed, createMemo, createSignal, on, untrack } from "solid-js"; import { createStore } from "solid-js/store"; import { render } from "solid-js/web";...

nm69

7/1/2025

same domain hrefs getting 404

issue can be reproduced in this page, https://www.solidjs.com/contributors search element by this xpath //*[@id="main-content"]/div/div/div[1]/div/div[2]/ul/li[1]/p[1]/a now change href of element to https://www.solidjs.com/img/bios/ryan-carniato.jpeg ...

NB 😈 | Nightly 🦊

6/30/2025

Worker exceeded startup limits cloudflare

I am using Solidstart with SSR on deploy i started getting this weird error ✘ [ERROR] Your Worker failed validation because it exceeded startup limits. It only happens with SSR enabled. I do not have big app and cpuprofile is below 200ms i added photo. This only happens sometimes even rebuild can fix this problem....

mrVinicius

6/29/2025

drag event not working?

Im facing a weird issue, which i have no idea why its happening. ```tsx <body>...

exercise

6/29/2025

add headers to public assets

any way to set custom headers on *.js files? middleware seems to only apply on pages

polyzium

6/29/2025

Reactivity issues

Hi. I am coming back to Solid after a long hiatus for a brand new project. I have been stuck trying to solve a very annoying reactivity issue that I have. I have an object in a signal (I do not use a store because I want it to be undefined), value of which gets passed to a component via a prop. There are also props for modifying that object. This object has an array of other objects, and I am using Index to render it. Whenever I remove an object from that array, its data gets "shifted" around, until I modify an attribute of that array that has an effect on rendering. Using For fixes this issue but it introduces a plethora of other bugs, like the settings popover for that object losing focus from the text input element (because the element based on that object data is being remade, including the settings popover). I asked LLM AIs to no avail. In Vue, I'd usually fix that by assigning it a different key value to trigger a rerender. I am lost and confused, please point me to the right direction....

FatFreeButter

6/28/2025

Cookies, SSR, and CSR

The app that I'm buliding will have 3 URLs: - www.mywebsite.com = marketing site - app.mywebsite.com = the application - api.mywebsite.com = REST API ...

FatFreeButter

6/22/2025

Pass props to component via navigation

I am building the registration flow of an application. /register captures email + password /verify captures the verification code that was sent via email ...

snorbi

6/20/2025

Invalid import by kobalte

I get the following error when trying to run my vitest tests (sorry, I'm unable to copy the text itself). Have you seen anything similar? Thanks. Image...

mbork.pl

6/18/2025

I'd like to run some code in my component, but only once.

I cannot put it in dependency-less createEffect, since it is supposed to run some time after the component is first rendered, but it must never be run more than once during the component lifecycle. I thought I'd use a local Boolean variable for that, like this: ``` function MyComponent() { const [dataLoaded, setDataLoaded] = createSignal(false); let actionPerformed = false; // This flag ensures the action runs only once...

Amir Hossein Hashemi

6/17/2025

Reactivity issues in Solid with vanilla HTML and JavaScript

I'm trying to use Solid with vanilla HTML and JavaScript. The only information I found is in the old documentation, but it doesn't seem to work for me. The problem I'm facing is that neither the HTML tagged template nor the hyperscript functions are enabling reactivity. In this code, you can see that the rendered counter doesn't update. What am I doing wrong?...

Previous Next

Gaming

Programming

SolidJS

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

SolidJS

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