SolidJS

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

Join

SolidJS

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

Join

Channels

support

SSudhagar

5/3/2024

Getting Object.hasOwn is not a function on older browsers. Attaching the trace

Shouldn't there be polyfills in place?

TTom

5/3/2024

Style attribute not updating in Safari

I wonder if anyone has run into this. I've got a SplitPane component that I just discovered doesn't work in Safari. It turns out the style attribute is not updating. I've got it down to

<div data-foo={`width: ${width()}`} style={`width: ${width()}`}>

<div data-foo={`width: ${width()}`} style={`width: ${width()}`}>

...

JSUJe Suis Un Ami

5/2/2024

Server Actions and Cookies sending error: Cannot set headers after they are sent to the clien

Maybe I am misunderstanding something here. I am following the docs for Actions. Basically, what this component is supposed to do is check for the pressence of a session cookie. And, if the user is authenticated, redirects the client to the dashboard page. And if not, it redirects the client to the login page. ``` export default function Home() { const loadAuthenticatedUser = useAction(getAuthenticatedUserAction); const navigate = useNavigate();...

HHussein

5/2/2024

how to use bun:sqlite without it leaking to the browser?

I'm using a Drizzle DB. how do i initialize it and use it in a route file in solid start?

Tterenced

5/2/2024

Solid +Astro SSR + Data Fetching on hydration

Hi! I working on an Astro site with Solid and I am having trouble getting Solid to fetch data. I would like to only fetch the component has been hydrated, but can't seem to get it to work. I am trying to detect if we are on the client by looking if window is defined. The console logs are correct, but the fetch is never triggered....

JBJoão Bezerra

5/2/2024

Is it ok to use a global store to persist component state between mounts?

Sometimes I want to be able to keep some component state between mounts. Partially filled form state is a good example. Is it ok to use a global store for this? Is there a better way?

DDon

5/2/2024

Solid Start (experiments) nested layout

In Solid-Start (experiments), it's possible to have nested layouts like this, which work fine. But what about a nested layout at the root of the project? I tried index.tsx and an index folder, or (main).tsx and a main folder, but none of them sadly worked.

DDon

5/2/2024

Solid Start (experiments) nested layout

EEatham

5/2/2024

Kobalte 13.x update issue

I get the following error. Didn't have this issue until after the update. Before the class and children props were applied. There were some structural changes but dont know if this was part of it or not. Asking here first if anyone knows if there was a change made. Otherwise will create a bug report on github....

Ttomdabomb

5/2/2024

Tagged Template Literals - Why is unwrapped props value reactive?

The docs at https://github.com/solidjs/solid/tree/main/packages/solid/html indicate that reactive variables must be manually wrapped when using tagged template literals, yet this basic example still works, https://playground.solidjs.com/anonymous/45f46e73-ac35-4455-a03b-f8501027fe23 Clarification: I am referring to line 25. It is unwrapped yet is still reactive. ...

SCMSome Call Me Tim

5/1/2024

API route in Route Group not picked up?

Migrating to RC1 caused my API routes in Route Groups (https://start.solidjs.com/core-concepts/routing#route-groups) to stop working? For a minimal repro, do a npm init solid@latest and create the file apiget.ts ```JSX export function GET() { return new Response('Hello World');...

Mmartixy

5/1/2024

computations created outside a `createRoot` or `render` will never be disposed

Escaping reactivity contexts is presumably usually because of async operations. Well, I create this effect inside an event handler. My component is attached to a specific part of the DOM, creating a small island of reactivity. However the event in question is a keydown event attached to the document. ```...

SCMSome Call Me Tim

5/1/2024

"AsyncLocalStorage" is not exported by "__vite-browser-external"

Installed the rc1, moved my code over, fixed up the issues coming from the v.3 release, npm run build dies with

../node_modules/vinxi/runtime/http.js (70:9): "AsyncLocalStorage" is not exported by "__vite-browser-external", imported by "../node_modules/vinxi/runtime/http.js"

Any suggestions on how to fix it up? Using node v20.12.2...

Mm.utku.k

4/30/2024

About tracking re-renders and Store usage

Hey there folks, how would one go about tracking the reasons of a re-render? Is there anything similar to React's why-did-you-render? 1) There's a bug in my app that re-renders the whole application (like does a full refresh / remounts the page) when a store field changes. I just cannot get to the bottom of it. What would you do about this? 2) My main suspect is my global Store instance which is outside the component hierarchy. I just declared it as a global export in a module. The thing is it works perfectly well in most cases except this one field - when I modify that field the whole app is weirdly reloaded. Is it fine to use Store/Signal instances declared globally outside the component hierarchy like that or should I just stick it inside a Context and inject that into my component tree?...

BBlankeos

4/30/2024

Get the request header inside a form action? For Solid Start

Let's say I have a login action and I first want to check if the user is already logged in, and if their session is already there (in the db). I want to do something conditionally for that.

Ppeerreynders

4/30/2024

“Push synchronization to the edge of the reactive graph”

TL;DR: Is this a thing? In the Clojure community there was a saying: “Push your impure functions to the edge of the system”...

EeVinAu

4/30/2024

Router preload and cache.set don't seem to be working

I've got an app that uses a HashRouter, and a couple of routes. The first route is a search page for events, which loads up suggested events for the user and has a form for custom searches, and then displays a list of events, and each list item is wrapped in an A component, pointed at the second route. The second route has a param for event id, and contains methods for interacting with events, as well as an A component linking back to the search page. Following the docs, I've written a file that exports API call functions to get the list of suggested events and the data for each event, which are wrapped in the cache method. In the top level component, where the router lives, I'm importing both API methods and wrapping them in functions that pass the relevant param to each method, which then becomes the load prop for the route. Within each route, I'm importing the relevant API method and wrapping createAsync around it to create a reactive signal for the API data. I can tell it's working, because I'm seeing the right data and page loads are instant after the initial load. However, preloads don't appear to be being triggered. The functions don't actually run when I hover over links. Also, the intent parameter is set to "native", not "navigate" when I click on an A component, which isn't what the docs say....

Bbinajmen

4/30/2024

Is this (completely 🫣) illegal in Solid world?

what is the best primitives/library to use when dealing with deep nested structure? the data I'm dealing with looks like a graph with nodes and leaves. every nodes/leaves has a component that should update his data that should stay reactive. pretty hard to explain the context 😅 ...

Ssokratis

4/30/2024

Calling root render multiple times

In React, if you call render on the same root more than once (e.g. root.render(<App someProp={43}/>), React will update the DOM as necessary to reflect the latest JSX you passed. Calling render on the same root again is similar to calling the set function on the root component. What's the suggested way to achieve a similar behavior using solid render(() => <App />, document.getElementById("app"));?...

MMaveriX89

4/30/2024

Vite 5.2.x / Vitest 1.5.x: How to Resolve Multiple Instances of Solid

I am nearing my wits end trying to resolve these error messages I receive when trying to run my SolidJS tests with @solidjs/testing-library and vitest ``` stderr | file:~/Developer/github/.../nm/node_modules/solid-js/dist/dev.js:1932:13 You appear to have multiple instances of Solid. This can lead to unexpected behavior....