SolidJS

S

SolidJS

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

Join

Uncaught Error: Failed attempt to create new DOM elements during hydration. Check that the libraries

This is my first time trying to create solid component with tsup https://github.com/solidjs-community/tsup-preset-solid and I'm assuming I'm doing something wrong 🙂 I never seen this error message before so I'm at a loss on where to start debugging this 🙂 setup on library side is pretty minimal, here's my index.tsx ```tsx...

Dynamic Component & Props

I'm having a hard time making use of the <Dynamic/> component and passing props to the underlying component. This is the dynamic component: Here, it should pass to the underlying component the id and onClick properties ```tsx...

Setting custom 'children' type

I'm attempting to create a carousel component for my Astro site using Ark UI and need to pass some elements into it for the items. I attempted to use the Component type instead of ParentComponent with a children parameter set to accept an array of elements. There seems to be no issues in the editor and the type is even correctly checked when using the component. When I run the site, however, the children property returns what looks like the standard JSX element. Is this intended behavior? If so...

Modifying subsets of resources, not re-rendering

I'm struggling with updating a subset of a resource, and using mutate to mark it as changed. my code is more complex but I think it's the same as this minimal example: https://playground.solidjs.com/anonymous/6c48c136-2c08-47b6-99a0-8b91068ccafa I suppose my question is, when updating a resource which is a list of items (which I guess are all individual signals), who do I update just one of those items, and trigger a UI re-render accordingly?...

How does Solid’s JSX attribute vs. prop implicit binding work?

Hey there, I am trying to get a better understanding on a deeper level about when to use attr:, when to use prop: and how the JSX compiler handles any prop automatically when I don’t use attr or prop explicitly. For example if I use edit on a web component (custom element), it works (it correctly uses the underlying prop that was defined on that element). But if I use onComplete, it doesn’t unless I specify it as prop:onComplete. But why does the edit work even though its not a regular DOM attribute? Does Solid ignore non-explicit and unknown props? If so, where is this defined? I'm a bit confused here, especially where the “magic’ happens....

H3Error: Cannot find module 'bun:sqlite' imported from

Same code works just fine with better-sqlite3 File has "use server" at start, so how it tries to find it seems to be important?...

Why does this loop infinitely

The following code calls serverFunc endlessly ```ts export default function Test() { const [people, setPeople] = createStore([ { id: '19' },...

Cache Auth Wrapper

How can I create a wrapper for the cache/action functions so that they include the auth check? So I'd like to go From ```ts...

How are you supposed to satisfy refs when not forwarding to a pure DOM node?

```ts function Example() { let controller: { open(): void } | undefined return <> <button onClick={() => controller?.open()}>Open</button>...

How to avoid passing too many props?

I recently made a component with like 20 mandatory props. How could I have reduced them while keeping type safety?

Cache with sanity

Hi everyone I'm using cache to request my sanity data, but who I can "forgot" the cache when update something on the sanity?...

Confused between For and index

Could someone please explain this a little more in depth, I am not able to follow the explanation on the tutorial.
No description

Can I nest cache functions

Can I nest cache functions and does it prevent multiple calls to the db, for instance ```ts export const getAuthCache = cache(async () => { 'use server'...

Production build in solid start is broken with vanilla extract

It seems that vanilla extract breaks the production build of solid start. No issue at all in dev mode. Anyone has managed to get it working? This is the portion of code that's breaking portion of code ```typescript if (router.target === "browser") {...
No description

useParams() returns params with unknown values

I'm trying to ssr a page with a dynamic parameter, but the parameters I get on the server are unknown. They are available in the preload function. Worst part is that I think this used to work a few days ago, and now it doesn't and it seems I've broken it somehow. ``` interface RouteProps { id: string }...

How to get 'client side' createResource behavior in SolidStart?

I noticed that if I don't have Suspense component in SolidStart, the whole page refreshes and createResource loading state doesn't render at all. For example if use this snippet from regular docs in solidstart project: ```...

Add scripts to header from string

Hi everyone I want to add a few scripts to my header, but I want to receive these scripts from Sanity CMS, so I will receive it as string. Any way to do it?...

template2 is not a function

Hey! I've been struggling a bit with a weird hydration error for a while and someone else posted this: https://discord.com/channels/722131463138705510/1295459352555294800. I get the same error but I don't have any duplicate <body> tags. Can we please reopen this or what would you guys suggest? I investigated it down to that in packages/solid/web/src/index.ts:136, we call getNextElement() with no arguments, but getNextElement from dom-expressions end up calling template() where template is it's first and only argument, here undefined. Is there a mismatch in solidjs 1.0.9 and dom-expressions?...
No description

custom css classes not applied somehow

Hi, i have this code: ```tsx <For each={alertsManager.getAlerts()}>...

Losing reactivity when importing a signal from a library that uses SolidJS

Hey 👋 I have a library that uses SolidJS, and a few projects that import said library. I have the following code in one of my library's util files: ```ts...
No description