SolidJS

S

SolidJS

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

Join

Navigation error

I get a weird cleanNode() exception when navigating to another page. The stack trace is useless (see in separate comment). The navigation is performed by a <button>, it is trivial, nothing extra happens there: <button onClick={() => navigate(...)} ... Do you have any recommendation how to find the root of the error? Thanks....

dynamic routes 404?

how can I intentionally throw 404 on a dynamic route (no server action or anything)?

Infinite scroll

I want to make infinite scrolling on notifications page since this is notifications page I don't use SSR, What I have problems with is how observer sees the last element of array. When I have elements enough to show scrollbar it doesn't have problems since it doesn't intersect with last element so my fetch request doesn't run twice but if I have small amounts of elements it sees the last element so it makes another request here is the code: ` createEffect(() => {...

Ignore specific error on the client during development (DevOverlay)

I'm getting an error about ResizeObserver that seems unavoidable. https://github.com/inokawa/virtua?tab=readme-ov-file#what-is-resizeobserver-loop-completed-with-undelivered-notifications-error I had the SSR enabled and I could avoid it by the following code: ...
CSR rendering error

Error when evaluating SSR module $vinxi/handler/ssr

Hi everyone After update my dependencies, I'm facing this error Error when evaluating SSR module $vinxi/handler/ssr: These are my dependencies: ```json "dependencies": {...
No description

cloudflare sending 200 status for *404

pnpm create solid choose solidstart set cloudflare-pages preset wrangler pages deploy dist (don't do wrangler pages dev, it works fine on local) go to any page that doesn't exist on your production url, you'll see 200 status...

Updating a signal vs Updating the data in the database

I have a model created by various signals that is local to the browser. I also use indexedDB solid-dexie to persist some data. Now when I make changes to my model I want parts of changes to be persisted to the database as well. I said I am using solid-dexie, but what are some libraries or best practices to handle persistence of the application? My use case is local only preferrably IndexedDB on the browser as the main database....

I want to debounce a signal for some effects, but not others

In short, I'm using a slider to allow the user to quickly adjust font scale linearly. I need the font to respond to the 1000s of adjustments, but I do not want to update the history buffer with every minor font change that the slider will trigger. I tried to get the primitives to work, but failed to find a way to have both instant and bounced effects without having to write a lot of code. https://primitives.solidjs.community/package/scheduled#debounce ...

When, and what types of errors <ErrorBoundary> catch?

The docs are not clear about exactly what types of errors are caught by <ErrorBoundary>. My understanding is that: <ErrorBoundary> catches any error that occurs during rendering or updating its children. That includes: - Errors that occur while rendering the JSX....

Google Analytics

Hi everyone I'm trying to add Google Analytics to my Solid Start project, but no data appears on the analytics page. Already try two ways: - Using script loader...

props and createMemo

I'm confused. I thought I understood perfectly Solid, and today I stumbled upon a performance issue that I don't understand. I've created a very small and silly example to reproduce it. https://playground.solidjs.com/anonymous/21929a27-2909-461b-87fe-141c7401f23c ...

Solid Start Cloudflare-pages deploy returns 404

After building solidstart app I can use it with Cloudflare dev mode but after deployment any requests returns 404. I am able to get static files tho. Dev mode also works. example https://aec52c8e.dex-app-5o2.pages.dev/ my config ```...

How can I animate an svg element, that already has it's custom transform

I have existing svg elements, that already has a specific transform to display on the corner. But I want to animate these by adding glow, pulsating effect or shock shake effect. What are my options to easily animate them.

Parent Get/Set Child Property

Can a parent component somehow set a property or access the property of a child component? ```JSX export function Tab(props: {label: string}){ return (...

createEffect not re-runing when value in accessors are changed

The createEffect in the print is not re-running when prop accessor is changed, is this some problem to reactivity? What i want is to run the effect everytime the param accessors are changed.
No description

Debugging "Error: Can't render headers after they are sent to the client."

I'm trying to figure out how to debug the above error. This happens whenever I hit "Sign Out" on my Supabase Auth + Solid Start project. It's triggered by setCookie in my Supabase server client initialization function. I'm not sure where to start on this one. I've been able to confirm that the problematic cookie is the Supabase Auth Token by logging out the name and the value when it errors: { name: 'sb-<project>-auth-token', value: '' }...

How does Solid attach event handlers to DOM elements?

I want to test wether a DOM element has an onclick event handler. However, using the onclick (delgated event) in the JSX component, there is a $$click property added to the DOM element with the event handler and the onclick property is null. Using on:click (native element) on the JSX component, there is no $$click property and onclick is still null. What is the underlying mechanism for adding an event handler to DOM elements? ref: https://docs.solidjs.com/concepts/components/event-handlers Also, as a follow up, how would I test that an event handler is present on a DOM element? I'm currently using Vitest and Testing Library....

Routes and fetch requests

I am trying to setup routes the way that whenever user visits "/xelosani/[id]" path they will get the profile page of user and when they visit "/xelosani/[id]/services/all" I want to have new page where user services will be rendered. - Current behavior Whenever I go to path: "/xelosani/[id]/services/all" the createAsync function that I have in "xelosani(details)/[id].jsx" file gets executed going to "/xelosani/[id]" works as expected it works just alright....
No description

<Suspense> not fallbacking correctly

```tsx import { createAsync, query } from "@solidjs/router"; import { Suspense } from "solid-js"; const getData = query(async () => {...