SolidJS

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

SolidJS

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

4/23/2024

How do I build my component?

Hi guys 👋 I'm a bit confused about how I could build a SolidJS component into JS that I could publish on NPM, and that my users could integrate on their website. 1. I can't find any info about that on the documentation....

peerreynders

4/23/2024

Practice of handling application globals in Solid(Start) symmetrically across client and server?

Example: In the CSR-only days it was idiomatic to store context value as a module-global value:
```jsx // file: counter.jsx import { createSignal, createContext, useContext } from "solid-js";...

ATA noob

4/23/2024

Ideal way to load settings/configs

Suppose I have a bunch of settings like user preferences (dark mode), or configs which I load using an API, How should I save and load these settings on start. Should I just save these settings in localstorage, and then use onMount() in the main App component to set the signals for all my configs? Or is there some better way?...

Eatham

4/23/2024

How to call `useNavigate` outside of router

I am trying to create my own "page viewer" where I will be able to navigate between pages within the site; Currently I am using the Solid Router. But I want to be able to call the "window" to navigate from outside of the router. But I can't do that. I get the following error when trying to call useNavigate...

Je Suis Un Ami

4/23/2024

Hydration Mismatch Error Every Time I Update a Component

I am rewriting an OAuth2 service for one of my apps in SolidStart. I keep getting this error every time I update a component when running it in Dev mode (see image). Event restarting the server throws this error. The only way I can fix it is to delete node_modules, reinstall dependencies, and then restart the server, which gets rather annoying. Any way to fix this? SolidStart v1.0.0-rc.0...

Ditto

4/22/2024

How can I synchronize two stores without running into an infinite loop?

The following code triggers an infinite loop: ```ts const [store1, setStore1] = createStore({a: 1, b: 2}); const [store2, setStore2] = createStore();...

Ditto

4/22/2024

What is the most idiomatic way of disabling an effect after a condition is met?

Is it possible to disable an effect after some condition is met or should I just use an early return? ```ts const [value, setValue] = useSignal<number | undefined>(); ...

ghost_soul0

4/22/2024

page refresh taking alot of time or may be not loading

I'm new to Solid.js, and I'm facing a problem with browser refreshing. When I make changes to my project and try to view them in Chrome, the page gets stuck in a loading state with the loading icon spinning indefinitely. This issue persists even after a long wait. I've tried using other browsers like Brave and Firefox as well. While these browsers initially load the page correctly when I enter the localhost URL, refreshing the page results in the same loading issue in Brave. In Firefox, the page works for a while, but eventually exhibits the same behavior, causing the browser to slow down. Can you please help me troubleshoot this problem?...

Bersaelor

4/22/2024

Getting `Error | Uncaught Client Exception` without any errors in the console

Recently, I'm seeing Error | Uncaught Client Exception in my browser when navigating to a new page on our solid-powered site. Unofrtunately there are no errors in the console. This also doesn't happen when I just use npm run dev. In run dev mode everything works fine....

iNdra

4/22/2024

TypeError: useContext is not a function or its return value is not iterable

I create a model component for reuse. I got "TypeError: useContext is not a function or its return value is not iterable" error. How to solve this error. This code is in single file. Error happening in const [{ show, hide }] = useContext(ModelPUp); line...

message.txt

SammyK

4/22/2024

Build process with solidstart

Hi I'm looking into using solidjs with SolidStart primarily for its build process. However, I have a few questions: What should I consider when integrating a router (the default solid router) with SolidStart, particularly if I'm focusing on a simple client-side rendered application?...

exercise

4/20/2024

Conditionally redirect based on resource result?

i'm fetching the logged in user using this: ```ts const [user] = createResource(async () => { const me = await trpc.me.query();...

sebb8200

4/20/2024

share context through web-components

using solid-element, is it possible to create a custom-element that provides a context and have other custom elements use this context? eg sth like ```...

mrVinicius

4/20/2024

library template

Is there a template which i can use to create my own libraries?

binajmen

4/20/2024

Is conditional rendering possible?

I have the following code: ```ts export default function Upsert() { const [searchParams] = useSearchParams(); const navigate = useNavigate();...

Some Call Me Tim

4/19/2024

How to output raw HTML with SSR Start?

I get a raw html string back from an API and want to just plop the contents before the closing <body> tag. I can do <span innerHTML={apiresponse}/> and it does output the proper HTML, but the HTML contains <script> tags, and needs to be attached to the body. I can't have the span/div/whatever in there. And doing

 <Show when={(routeDataResponse() as ApiResponse)}>{response=>response}</Show>

 <Show when={(routeDataResponse() as ApiResponse)}>{response=>response}</Show>

...

Pseudotronics

4/19/2024

How to make a reactive copy of a store.

I have an application where I am modifying the configuration for a device. The configuration is maintained in a store and provided via context to the app. What I want to do is make a copy of part of the store (the portion that represents the configuration) of the device and use it as the reactive source for a configuration page. The idea here being I want to copy the current configuration and then let the user modify the copy via reactive controls before applying the configuration to the device via a save button. Here is what I have tried to do:...

aryzing

4/19/2024

How to deal with `on:event` in typescript?

Typescript is reporting errors for events declared with on:myevent syntax. Is there a fix?

Sudhagar

4/19/2024

How can I inject json-ld data into my route page?

This is the json I want to inject ``` { "@context": "http://schema.org", "@type": "Product",...

ATA noob

4/19/2024

Is this Firebase Context correct?

I got this code online but not sure about it. Will the values come to me reactively. I'm worried that if I have a few protected(authenticated) routes, and firebase auth is still loading, then my user will get redirected to login page. ``` import { JSXElement, createContext, useContext } from "solid-js"; import { createStore } from "solid-js/store"; import { app } from "../configs/firebase";...

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.