SolidJS

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

SolidJS

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

5/8/2023

route.outlet is not a function

I installed the solid transition group and tried using it. Ever since then I get "router.outlet is not a function" error and the page wont load. I uninstalled solid transition, reset changes to my package lock json, ran npm i, ran npm run dev, commented out large portions of my code.... and it's still "router.outlet is not a function"...

Samual 🦢

5/7/2023

basic progressively enhanced counter not working

In my project I was running into an issue where I was getting the initial state of a variable so I made a minimal reproduction```js // src/routes/index.tsx import { useRouteData } from "solid-start" import { createServerAction$, createServerData$, redirect } from "solid-start/server" ...

LKB

5/7/2023

ErrorBoundry component not works

hi now i am doing official-tutorial : https://www.solidjs.com/tutorial/flow_error_boundary I copy-and-paste this code in my vite project. the full-code is below this ...

arazorda

5/7/2023

SSR, Reactivity of Signals on onMount

Hey guys, I've got couple of signals in the view, which are strings and I'm sending default values via SSR, then on onMount, I'm changing values of these signals. If I put console log inside createEffect, I see that values are changed, but it's not being changed in the view. Also, if I add timeout of signal updates in onMount, for like 200-300ms, I see that values change in the view as well. ...

Thomas

5/6/2023

Flickering UI with solidstart

When I am on dark mode with tailwindcss and I navigate between routes for the first time, the theme is for a moment light before going dark. This is very bad for user experience. issue happens when: - first load - reloading page...

zh0nb

5/6/2023

onClick event does not get fired

Hi everyone, I'm facing a weird issue where onClick events are not fired if I use them within a For loop. The button that's outside of the for loop (.working-button) is working fine, but the rest are not working at all. This is the component's code (I'm using nanostores since I'm embedding this within an Astro website with client:load). You can see my code here:...

Braveheart

5/5/2023

suspense + store

if I have a form tied to a store that gets populated async, how do i use this with <suspense so i don't need loading state management

Je Suis Un Ami

5/4/2023

props.children is not defined.

I have this component. ``` const AuthProvider: Component<AuthContextProps> = (props) => { /// the local store. const [tokenStorage, setTokenStorage] = createLocalStorage({...

Dastrus

5/4/2023

Using For in combination with createStore array of arrays property

Hello all. I've run into an issue with regards to using a store which contains a property that's an array of string arrays. The issue is that it rerenders all the JSX that's in the For callback for that index. It kinda looks like the following: const [store, setStore] = createStore({ synonyms: [['test_1', 'test_2'], ['test_3', 'test_4']], ...other_properties }); const onChange = (value: any, index: number) => {...

Madaxen86

5/3/2023

Context.Provider breaks reactivity

Need help with a simple Context Provider issue. Here's a little sample of the code:

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

...

Some Call Me Tim

5/3/2023

Node instance often hanging at 100% CPU.

Anyone else getting node freezes/hangs? I'm not doing any server related functions at all, but at least a 5-10 times a day, Solid Start just stops serving content because the node instance spins up to 100%. If I force kill it, I can do npm run dev again, and it works as per usual. No pattern or one thing that seems to do it as far as I can tell. And once I restart the dev server, I can refresh the same URL that caused it to die and it'll work fine....

Ladvace

5/3/2023

Filtering array in object keyed store inside a produce

In the snippet above I have a keyed object, for each key there is an array, that I filter, the filter doesn't seems working, what is the best way to do it? ``` setObj( produce((prev) => {...

Some Call Me Tim

5/3/2023

Outside a createRoot error when multiple signals in a prop?

Can someone clever give me a quick rundown as to why button 1 generates a warning? Doesn't it just evaluate to boolean anyways? https://playground.solidjs.com/anonymous/d5fe0e41-701e-4360-b991-867f9e57811f...

lars

5/1/2023

parent route with redirect (solid-router)?

is there a way to define a parent route that redirects to a child route? eg. say with the below route config, is there a way to set up a redirect from /home -> /home/browse? ```jsx <Route path="/home" component={Home}>...

nikiv.dev

5/1/2023

Why do keyframes not work in <styled> in SolidJS

I have loader component: https://github.com/nikitavoloboev/kuskus/blob/main/src/components/Loader.tsx

Vexcited

5/1/2023

Title of page not updating

So the thing is that I use SolidStart with CSR mode (w/index.html so vite-plugin-pwa detects it) On development, Title is working. On production, it doesn't. ...

Song

4/30/2023

how to`createStore` and using `createEffect` to persist without warning

I want to create a function to persist the store to the localstorage, everything works, but it warns that computations created outside a createRoot or render will never be disposed. I have tried to move createEffect outside onMounted, but it even warn twice. Additionally, moving onMounted inside provider makes persist break. No help using ChatGPT🥲. Does anyone know how to solve it? here is my code ```ts export function persistStore< T extends object = {}, R extends ActionReturn = {}>( name: string,...

Tommypop

4/29/2023

Google Oauth in Solid: Best Practices

Hi, I've got a solid start project with an actix web backend. What's the recommended approach for implementing google oauth so that I can get the google user id to the actix backend so that I can store data against it, and is there a library for this that doesn't entirely leverage solid start's server for session storage, as I'd ideally like to handle that in my actix backend? I know I can use google identity directly, and then get and send a google id token to the server, which I can then verif...

jwueller

4/29/2023

Dealing with null checks on resources

I'm trying to convert an app from Next.js to SolidStart to have a side-by-side comparison, but I'm encountering some weirdness when dealing with certain "expected error" states, like resources not being found. I have a blog with tagged articles. In Next, I would just do something like this in my component: ```tsx const tag = await findTagBySlug(params.slug);...

DaOfficialWizard🧙

4/28/2023

SolidJS failing all of a sudden

Hello, ive been working on a project recently, took a break to work on something else. Came back today (having changed nothing) and my project no longer functions. Even though it worked as intended just a week ago. Seems to be an issue with the router....

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.