SolidJS

S

SolidJS

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

Join

Cached resource runs into an error when using an action

I'm running into this error which I've isolated to a component that uses this cached function ``` const getAgentsAction = cache(async () => { try { const agents = await listAgents();...
No description

Can on__ handler be async?

Seems that having async handlers works fine,
const button = <button onClick={doSomethingAsync}>Click me</button>
const button = <button onClick={doSomethingAsync}>Click me</button>
...

Can't route with Solid Router in subfolder of multi-page Vite app

i have a folder structure where my solid app exists inside of /prefabs with children like /prefabs/index.html and /prefabs/src/index.tsx. at the root of the folder structure is /vite.config.ts which looks like this. (/techdc/ is not a solid application, its just TypeScript.) ```tsx import { defineConfig } from 'vite' import { resolve } from 'path'...

createResource does not trigger suspense when its first-argument signal changes

I have a modal component, with its open state managed by a signal. I want to fetch the data that should be displayed in the modal only once the modal is opened by the user and display a loading message while data is still loading. However, Suspense is not triggered in my case, and I don't really understand why. Isn't it supposed to be triggered in this case? ```ts function MyComp(props: { id: string }) { const [open, setOpen] = createSignal(false);...

window.location.search not empty after changing route

I need your help because I'm stuck and not sure how to proceed. I have a Solid.js app with the following sample code: ```jsx import { A, useLocation, useNavigate } from "@solidjs/router"; ...

Undici fetch failed while building solid-start project on prod server

@Halcyon while building solid-start project with solid-start build inside docker build with node:20-alpine3.18 this error seems to intermittently and consistently appear. ...

Nested Immer "produce" signals with components

I'm trying to implement something like this, which would allow me to create "nested" signals that update the upmost signal: ```tsx function createImmerSignal<T>(value: T) { const [get, set] = createSignal(value);...

How can I pass data from middleware to frontend on solid-start.

I have this middleware to validate a user accesstoken. And the response provides me the name of the user and the validity of the token. While I handle the redirects if valid or not from the middleware. I would like to use the user name in the app layout. How could I pass it down to the client? I can't find a nice solution for it. ``` export default createMiddleware({ onRequest: [...

Reading page states in App

is there a way to allow app reading states from a page component, similar to pageProps?

cannot use import statement outside a module

just pushed my first solidstart app to azure cloud but vinxi start is failing. app works fine in local dev mode. i'm using github actions to deploy to azure app service. ```...

Solid-refresh with Webpack HMR errors

Hello, I'm trying to integrate solid-refresh in a webpack based solid-js app to make development a bit easier. The app is a microfrontend and we used module federation in the company I work on, so I can't just use other bundlers. Unfortunately, I haven't found any templates or projects with this setup. The following are some pieces from the webpack config I think might be relevant to figure the issue out. ```typescript...

Best pattern when using createStore to store large amount of data for a large app?

As the title says, what is the best pattern, is there an example on github or something you could show? In react + mobx, I know this pretty nice pattern which looks really clean and been using. Is there something like this pattern or something better for createStore? ```ts import { makeAutoObservable } from 'mobx'; ...

How to read SolidJS source code ?

If I want to understand SolidJS deeply, is it recommended to reading the current SolidJS source code or start from the beginning, such as solid v0.4.2?

Getting import errors

I have a lot of experience when it comes to JS/React/etc. Solidjs peeked my interest and I have wanted to take a deeper look at it. Found a small project I wanted to build using SolidStart to see what it's all about. Following these set docs: https://start.solidjs.com/getting-started/project-setup ```...
No description

Hack to render

I have a signal pValue that takes values on input blur ```<input type="number" onBlur={(e) => {...

Accessing props

Given a component liks this: ```typescript function Test(props) { return <div>{props.Test}</div> }...

For is not Reactive ?

Hi, I've made this filter list using For: ```tsx <ul tabIndex={0}...

How to refetch a "use server" function / RPC?

I've created a server function that I can confirm works as expected, now I'm trying to figure out how to "correctly" re-run this function on a timed interval. Using the documentation (https://start.solidjs.com/core-concepts/data-loading), it first mentions createResource() for requests, which makes sense since it comes with a mutate and refetch function. Then it goes on to give a "Data loading always on the server" example, now moving to createAsync and cache (both /router imports), but from my attempts to use those examples, they work for initial page load but do not appear to contain mechanisms for re-running the server function and updating the UI accordingly. Additionally, the example listed above doesn't seem to actually run anything async (there's no await in that async server function), so I'm wondering if maybe the example is still missing something (like when is the route object used?! Is it a magic object / used somehow when exported from a page? Not listed in API Routes tab). Am I missing something?...

Conditional Component Type rendering?

I am trying to work on a component where depending on a variable I need to wrap it with either an <a> tag or a <div>. The only conditional flow related documentation uses the <Show> component, but I'm trying to do something more akin to ```JSX...

.env.local not working

According to Vite's documentation (https://vitejs.dev/guide/env-and-mode) I should be able to use a file .env.local . However, I am not able to use any values from .env.local at all in a solid-start application. What's going on?