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

Join Server

Community questions


How can i go back with @solidjs/router package ?

i want to go back in the history of the url with all the search parameters and more, is this posible i dnt se in the doc that method

What are the differences? Produce vs regular setStore

This is Astro + SolidJS components.

Besides produce allowing to neatly update specific properties of an object, are there any other differences? Any performance nuances between these 2 approaches dealing with stores?
import { createStore, produce } from "solid-js/store";
export function SolidComponent() {
const [solidStore, setSolidStore] = createStore({ a: "aaa", b: "bbb" });
function updateA() {
setSolidStore((obj) => {

How to create an effect that runs on page navigate

I think this should be fairly straightforward. How can I define a createEffect that runs each time navigation occurs?

Integrate External, Read-Only Data Source Into Reactive System

Suppose the following:
// Hypothetical external data
let externalData = new Map()
EventEmitter.emit("dataChanged", /no event info/)

// My problem...
function externMemo (externData) {
EventEmitter.on("dataChanged", ()=>/trigger getter refetch & dom update/ )
let getter = ()=>{
// ...
return externData

return getter

// Hypothetical Component
let component = () => {
let reactiveData = externMemo(externalData)
return (

vite bundling unused components from external libraries (SSR)

o/ question, i'm using for icons and while i really like it, it seems to be including icons that i'm not using in the final build. my website is SSR'd and deployed in vercel, and it's complaining that the render function is too big. is there anything i can do to make it exclude icons i am not using?

How to mutate a createResource storage

Hi all, I'd like to get some help with mutating a store that is set as a createResource storage.

function createDeepSignal<T>(value: T): Signal<T> {
const [store, setStore] = createStore({
return [
() => store.value,
(v: T) => {
const unwrapped = unwrap(store.value);
typeof v === "function" && (v = v(unwrapped));
setStore("value", reconcile(v));
return store.value;
] as Signal<T>;

const [resource, {mutate, refetch}] =...

Are there any important considerations to creating signals in control component callbacks like For

Hi, wondering if there's anything to consider in terms of tracking etc in having something like this

      <For each={}>
        {(data) => {
          const [isOpen, setOpen] = createSignal(false);
          return <Component data={data} isOpen={isOpen} onClick={()=>setOpen(x=>!x)}/>;

Or if it's actually better to have some intermediary component where the signal to track state is declared in jsx.


Dispose function not actually disposing of anything

I'm running Solid as a partial view inside another, non-Solid app. I've used webpack to export Solid's render function and assign it to the Window object (so i can access it from the outer app by calling window.render) and then I dynamically import the components I need and render them to a div on the page, and I hold on to the return value of the render function so I can dispose of it later. When I want to swap one component out for another, I call that dispose function, dynamically import the...

Failed to execute 'querySelector' on 'Document': '#' is not a valid selector.

Anyone know what's causing this? Doesn't seem to impact functionality, but I constantly get this error when navigation from one to another in my solid app while using solid router

React key prop substitute!

I know what you're thinking, James, you silly sausage - Solid.js doesn't require keys for loops, and you're absolutely right but... I need key={} for another reason, I need to cause a component to be entirely unmounted and remounted, which was easily viable in React by just updating its key value in its parent. Any ideas how I can do that in Solid.js?


Best way to dynamically access i18n-translations with typescript

Hey folks,

I am currently using @solid-primitives/i18n ( for translation purposes.

However there's one thing i struggle with:

Some of the keys I would like to access are coming from an api, where each key is typed as generic string.

For example imagine that my dict looks like this:

const en_dict = {
   foo: {
     bar: 'Bar',
     baz: 'Baz'

And I want to translate like this:


i18n and context issues

Hey folks,

I am currently migrating to the 2.0.0 release of @solid-primitives/i18n. (

However I have a few questions:

1. The way t is being defined in the docs will always give me the famous reactive variable 'xxx' should be used within JSX error. Which makes sense. Therefore I wonder, why all examples are build this way even though locales and therefore the current dict might change? Is this an error...

Difference between `setState` and `produce`?

I have appState as a store, and I'm trying to pass appState.selectedTable as a prop to a child component. When I simply use setAppState, it doesn't trigger a prop change in the child component. I've found that I need to use produce for it to work. The problem is, the documentation only gives a one-liner about the produce API. Could someone provide more information on how to properly use produce and createStore in this context?

Solid Start not deploying on vercel in turborepo

Hi all,
my solid start project doesn't deploy to vercel, aka every build fails.

There are no error's though, the build fails, because the deployment duration takes over 45 minutes.

There are 0 errors in the output log, and the output ends with the following

backend:build:  solid-start build 
backend:build:  version  0.2.32
backend:build:  adapter  vercel
backend:build: solid-start building client...
backend:build: solid-start rendering index.html...

Problem duplicating a component navigating with dynamic routing

I am having difficulty causing a route component to be duplicated when navigating between a dynamic route in an Electron/SolidJS application using the SolidJS Router.

Example route def:
<Route path="/search" component={Search}>
  <Route path="/" />
  <Route path="/:id" component={SearchWorkspace} />

My intention is to navigate between say /search/123456789 to /search/987654321 but am unable to get the components to re-render unless I visit another route first.

The `Searc...

How to solve ts(2322) error on "each" attribute of "For" component

I'm trying to render items using the built-in "For" component for solid but I keep getting the following error:

Type '(() => Promise<any>) | undefined' is not assignable to type 'false | readonly any[] | null | undefined'.
Type '() => Promise<any>' is not assignable to type 'false | readonly any[] | null | undefined'.ts(2322)
flow.d.ts(17, 5): The expected type comes from property 'each' which is declared here on type 'IntrinsicAttributes & { each: false | readonly any[] | null | undefine...

How to make array key in resource from useRouteData reactive

I'm noticing that, if the resource that is the return value of useRouteData is an object, then its keys will mostly be reactive -- but if the key has an array as its value, that key will not be reactive
const data  useRouteData();
data().name // reactive
data().groceryList[0] // not reactive

If I just stringify this value on the server and then parse it on the client, then that works just fine, but I'm wondering if there is any way to make it reactive?

The associated `route...

possible to cancel back button with solid router?

i am making a minigame website and people are accidentally swiping back on their phones while playing the games. any way to cancel the "browser back" action while they're in the middle of one of these html canvas games? i'm using solid router for my site navigation

createResource from the main layout causes it to completely crash the page

I have a dashboard.tsx main layout file and 2 routes inside this dashboard route, and inside this layout I have these resources

export const routeData = () => {
const project = createResource(async () => {
try {
const projectRes = await getProject();
return projectRes!.data;
} catch (error: any) {
console.log("couldn't get project info", error.message);

const user = createResource(async () => {
try {
const e = useServerContext();...

Rendering Solid inside another app

I work as a web developer maintaining an organisation's web portal. The portal is quite old - it's built using ASP.NET MVC 5 and Knockout, and features a lot of custom architecture. I'd like to make moves towards upgrading it to a more modern framework (and while I've picked Solid for that we may settle on something else in the end), but we have only a very small team and it's a large project - too large to port it all over to a new framework in one go. To that end, I've been experimenting with...