SolidJS

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

SolidJS

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

2/21/2025

Another `template2 is not a function` issue

Took a look at the other posts mentioning this issue and can't seem to find anything that helps solve the case. I have a Tab Switch component to display different JSX.Elements with. I'm about 98% sure the error is coming out of this component because when I return a simple <h1>Hej</h1> there is no template2 error. I was originally using @kobalte/core's Tabs component, then decided to try and make my own rough tab switch component. Both have produced this error and I'm not really sure how best to proceed or troubleshoot. So any guidance would be helpful....

Joshua

2/21/2025

solid-router causes error: "cleanups created outside a `createRoot` or `render` will never be run"

Hi I am relatively new to solid so I could be making a simple mistake. I recently added solid router to my solid.js project and I am using the config based approach. Since I added the router and using it I get multiple errors like this: - cleanups created outside a createRoot or render will never be run - computations created outside a createRoot or render will never be disposed Since the router is actually rendered inside the render() method of solid, I am not sure what I am doing wrong, any help how to fix the warnings would be appreciated. Below you can see my code (I also uploaded the full files because pasting entire code is higher than the discord message limit....

App.tsx

hyperknot

2/20/2025

How to check if createMemo should be used?

I'm trying to figure out if using createMemo is or isn't worth it. I know that for super basic equality checks, there is probably no point. But what about something slow, like code highlighting?...

anthy

2/20/2025

"Simulating" loading state with createAsync

Here's a very simplified example what I'm trying to achieve: ```typescript import { createAsync, query } from '@solidjs/router'; import { Suspense } from 'solid-js'; ...

stereokai

2/19/2025

Exclude store property from `unwrap` or from being watched

When updating a SolidJS store, the entire next state of the store gets unwrapped (for example by updateArray()). Let's say the store is an array of objects, and each object has a data property which is a really big array. Unwrapping each of these arrays adds up to a very noticeable slow down every time the store is updated. Is there a way to exclude this property from being unwrapped, or from being "watched" by SolidJS? Thanks.

Norman

2/19/2025

can i change the path of `_server` and `_build` ?

can i change the path of _server and _build ? cuz i wana create discord activity and it's you can't have "/_" path

KiaClouth

2/17/2025

When I use blockly, nothing is on the page

I tried using blockly as the logic editor for my app, but when I use it, nothing renders and the console doesn't print anything out. I don't know how to troubleshoot this error. I didn't find the answer on both vite and blockly issues. Can anyone help me?

webstrand

2/16/2025

How to onCleanup an async resource from createResource?

```ts createResource(url, async (url) => { var resource; tryOnCleanup(() => resource?.close()); return resource = await connectToUrl(url);...

hyperknot

2/16/2025

Understanding Solid reactivity with console.log

I'm using createMemo with a console.log inside. Can you tell me why is this console.logging all the items, when I click on one? Am I using createMemo in a wrong way? I thought only the 2 changed items would be recalculated. I created a Stackblitz + GitHub repo to undestand this better:...

tizu

2/16/2025

reference child component as ref?

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

<button ref={setReference} onClick={() => setOpen(!open())}>
    {p.trigger /* JSX.Element */}
</button>

Is there some way I can have this not wrap the child in a button, but instead let the child be its own button and reference that?...

gsoutz

2/15/2025

How can I tell solid router to navigate to a page by forcing a refresh, breaking the SPA

I need to send specific CORS headers on a specific page which I can only do with netlify by specifying a link and the set headers. But when they navigate to home page and then click the link, the headers is not set because home page link doesn't set the headers by netlify not configured as such. And I can't include the headers to be set on the home page as well. Because then contact page embedded video doesn't work because headers are too strict. So the easiest workaround is the force a refresh on a specific link to force the netlify configuration to work for that link specifically. Basically I need something like this:...

ⱼ ₒ ₑ

2/15/2025

Server function not being called (?)

I'm sorry for asking help for something that should be so simple but I'm very confused. I currently have a simple async server debug function: ```tsx export const Login = async (authType: AuthType) => { "use server";...

Some Afk Guy

2/15/2025

reactivity works in vite dev but fails in vite build

Hi guys I am in in quite the rabbit hole and love a sanity check, I've tried multiple refactors, but the issue is my solids reactivity is not working... In both environments...

binajmen

2/15/2025

Using createAsync in SolidJS: Handling Data Dependencies

Currently, I'm thinking of two approaches: Unified Loader Pattern: ```ts const loader = query(async (id: string) => {...

ChrisThornham

2/14/2025

Can I Block All Back Navigation?

With A or useNavigation(), I can set replace: true to remove the most recently visited page from the browser history. But this doesn't block back navigation. If I click back, I skip the most recent page and go to the page that was visited before the page I just came from. Is there any way that I can block all back navigation on a specific page?...

luis

2/14/2025

SolidStart(?) useContext problem

Trying to use useContext in solidstart, but it seems that it server renders my provider and doesn't change in client, not sure what i'm doing wrong. ThemeProvider is in the root of app.tsx, trying to use ThemeSelector in routes/index.tsx ```tsx export const ThemeProvider: ParentComponent = ({ children }) => {...

ⱼ ₒ ₑ

2/14/2025

useContext is undefined

Wrapped in a function with a throw, and it throws an error no matter what I've verified it's wrapped in a provider, and the context set-up is identical to the other providers ```jsx const SaveButton: Component<JSX.HTMLAttributes<HTMLDivElement>> = (props) => { const ctx = useSettingsContext();...

Hussein

2/14/2025

ERR_HTTP_HEADERS_SENT

```ts import { APIEvent } from "@solidjs/start/server"; export async function POST(event: APIEvent) { const data = new FormData();...

anthy

2/14/2025

Initial search params

Is there a way to set initial search parameters for a route? I'm building an application where users are able to save their table sorting/filters into local storage and the next time they visit the page, those are automatically populated to the search params. ```javascript function Route() { const defaultParams = getDefaultParamsFromStorage();...

hyperknot

2/13/2025

How do I best have createMemo in a store?

I'm used to MobX, where I can put a @computed on any method in a store. In Solid, how do I best replicate this? If I do this:...

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.