SolidJS

S

SolidJS

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

Join

How to make a library with Vite's library mode?

I'm in a monorepo scenario and want to make a component library for the shared UI. Since there's not template (although there should really be one, like Svelte's package), how can I go about configuring the newly-made Vite project to export my components?

Understanding memoization re-running

Hi everyone, I'm new to SolidJS (from React), but so far enjoying it! I was running into some unexpected behavior when dealing with memoization though, and I was wondering if someone could help me understand, or help me figure out if I had run into a bug (either in my code or in Solid). Solid Playground link: https://playground.solidjs.com/anonymous/2850a930-a45f-48d6-92ff-fc644cee0bbc...

Make sure your app is wrapped in a <Router />

Hey folks, probably something silly but why can't I access useNavigator in my RouteGuard? Attaching my RouteGuard and App.tsx 🙏...
No description

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted...

We are facing this rather flakey error when upgrading to the new Solid Start Beta 0.4. Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. There had been so many package upgraded that I don't know for sure what is the culprit....

Download file from public/documents

Hi, I want to have an A-Element, that starts a download for a .pdf-file I placed in public/documents. Currently it looks something like this: ``` <A...

Having trouble implementing a stack of views because of the lifecycle of <Dynamic>

For my site, I have implemented a stack of views, sort of like on iOS where you can push and pop views from a shared navigation stack. But I'm having issues with how <Dynamic> renders. It's easier to show an example, so I made this minimal repro in the playground: https://playground.solidjs.com/anonymous/90d6fbd1-6114-4fb8-aa60-5c6ac104dcd3 The problem can be seen by first adding a view, then hitting "remove myself" on that view. The console log should help make it clear what the problem is too. There's no longer a view on the stack, so I'd assume the <Dynamic> component would just not render again, but what actually happens is it renders out of sync a bit, where the component renders again but the props are undefined during the last render. This has led to a footgun where I have to be careful in a view to not do anything after popping that view, and have to be overly-careful with checking for undefined props in createEffect calls, since it could be called in this weird situation where <Dynamic> is rendering one last time with a defined view but not the props associated with it. ...

Use solid as middleware

Goal: parse existing html from third party server, read all data-component attributes from HTML, load dynamic component based on data-component attribute and then return newly rendered HTML w/ interactivity. Hi I would like to create a Solid-Middleware so to speak. I want to parse a given HTML and look for tells to load components dynamically and then return it all to the browser. How would you start doing this? The following markup would be for example fetched dynamically based on given slug ```html...

How to trigger createEffect when navigating to the same URL ?

Hi, is it possible to trigger a createEffect that listens to location.search from the solid router's useLocation when I navigate to the same URL?

Getting ReferenceError: React is not defined with Vitest + Solid Testing Library

I honestly have no idea how I am receiving this error but I am despite testing using @solidjs/testing-library. Moreover, I am using Vitest by itself (not Vite) and my vitest.config.ts is as follows: ```ts import { defineConfig } from "vitest/config"; ...

backend solidstart or another backend.

Does solidstart make sense if a third-party backend (fastapi) is used? I don't want to write backend in node js because I know fastapi(python) better. What do you advise?...

Understanding the deployment of a SolidJS app (with a separate backend)

I hope this doesn’t go too off topic because this is more of a general question but I am trying to understand what are my options for deploying an application made with SolidJS for the frontend and, for example, Golang for the backend. Let’s say I want to deploy my web app to Heroku. From what I understand I have three options: 1. Building the SolidJS app and creating a NodeJS server (e.g. with Express) that serves the static files. With that, I would need to host my backend as one server and my frontend another. The frontend would call the backend from a different domain and to make that work I would need to set up the CORS policy. Maybe for that option it would be better to deploy the frontend to Netlify....

Creating custom SolidJS hook that can be used in a global scope

Need some help understanding how to build a custom SolidJS hook that can be used both locally inside a component and outside in the global scope (like createSignal can). Below is. a small snippet of a custom hook I am writing: ```tsx...

How to set a cookie that is returned from api call?

I'm using createAsync for a server api call. The api returns data with cookie that I need later. ``` async function foo(){ "use server"; const res = await callApi();...

renderToString not work

I have two questions about SSR: 1. It cannot work according to document about renderToString. The browser always plain when the response is a string by renderToString. However, If the response is string that I need not to use renderToString, it works well. The code is following: import { renderToString } from "solid-js/web"; ...

useNavigate wrapped in <Router>

Hello! I'm trying to use useNavigate inside a top-level element so I can setup some event listeners that will trigger navigations app-wide: https://playground.solidjs.com/anonymous/2ea655b2-d438-4ead-ac5d-a6f134d79e26 gives me Uncaught Error: Make sure your app is wrapped in a <Router />...

Response.clone: Body has already been consumed. Seroval/trpc conflict?

There was some discussion about this recently, but was there a way to fix this currently in user code?

SolidStart for PWA with CSR? And Guide of available templates.

I want to build a PWA with CSR. So, I've installed Solid Start, and used the "basic" template. But: 1. I'm not sure if that's my best alternative. Is there a place where I can read the purpose or attributes of each of the suggested templates?. 2. Is it even a good idea to use SolidStart for a CSR PWA? because here: https://start.solidjs.com/core-concepts/state-management I've found this text:...

Import React component with Module Federation

I have a simple use case which belies the greater effort: importing a counter with a starting value prop I have a SO post: https://stackoverflow.com/questions/77881409/how-can-i-get-solid-to-process-a-react-component-with-props-using-module-federat It also links to the repo, but here it is anyway: https://github.com/CSworenI/react-to-solid...

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