SolidJS

S

SolidJS

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

Join

HMR is not working

I am currently learning SolidJS and am having problems with HMR. I have created a SolidJS project with npm create vite@latest, in which HMR is supposed to work. So far I have manually updated all packages to the latest version and explicitly turned on HMR in the Vite plugin, unsuccessfully. Why could it not work and what can I do? ```json // package.json ...

memoized debounce

I want to memoize my debounced function but unfortunately it's not working. Can someone tell whats wrong.
memo(() => debounce(getData?.refetch, 500))
memo(() => debounce(getData?.refetch, 500))
...

How would you go about Font Awesome icons?

I’m new to Font Awesome and was trying to understand what the better way of using those was and it said that since I was using a JS framework I should go for the SVG + JS way but I had no clue on how that works, especially because there’s no Solid guide.

Owner not setting for context provider

I'm working on an adapter for inertia.js with solid, and I was looking to add providers similar to their persistent layouts, but I can't seem to get the provider to attach to the component properly. The component is not being wrapped in the provider how I was intending it to. I don't know if it's even possible to do it this way. ```js function Create(props) {   return (...

onMount() vs addEventListener('DOMContentLoaded')

Is there a best practice (and why) or differences/pros/cons of either means of listening for the DOM to be loaded?

Testing portals

Hey, I am currently trying to test a datepicker created with https://github.com/rnwonder/solid-date-picker with testing-libary. However I am not quite sure how to select the actual picker. It seems to get rendered into a div with the id portal-island, which also shows up in my test, but without its contents. What would be the general way to test this? I also tried to jsut use querySelector but am not sure, how to get the correct container element to attach the querySelector to....

createEffect dependency

I wanna run an effect each time a signal changes but I don't need to use the signal inside the function of the effect, something like in react useEffect which is the dependency array, is there a way to tackle this use case in solid useEffect?

render(() => { <Component />, element }) throws an error when including props

render(() => { <Component />, element }) This works if I only reference the component as <Component /> However, I get an error when using <Component id='xyz' />...

Why is this Resource fetcher called 2 times?

https://playground.solidjs.com/anonymous/347f9b68-3bae-4021-8276-00ac67404618 This log is displayed two times:
"---> why is second resource fetcher called 2 times?"
...

createResource refetch causes full page refresh

I'm using SolidStart, dabbling for the first time with data fetching using Solid, apologies in advance for any simple misunderstandings. I've got an API route giving me a list of projects which I've put into a resource in the following manner: ```Typescript /* ... */...

Brand new going through the tutorial. Unsure of the purpose of the <Dynamic> component.

I feel like I'm missing something obvious. The tutorial page for the <Dynamic> component introduces it as a more compact alternative to a bunch of <Show> or <Switch> components. The "Solution" to the code wants me to replace a <Switch> with <Dynamic component={options[selected()]} />. But why do I even need <Dynamic>? See the full code below. ```jsx import { render, Dynamic } from "solid-js/web"; import { createSignal, For } from "solid-js";...

Forward ref downstream

How can I forward a HTMLElement reference to a downstream component? i.e: ```jsx <div ref={theDiv}> <MyComponent refToTheDiv={theDiv}/> </div>...

How can I stop code from executing before?

I am using @solidjs/router for routing, here's the code: ```tsx <Router> <Routes> <Route path="/" component={Guard}>...

Trying to modify a type from @auth/core

Hi there, I am trying to edit the DefaultSession type from @auth/core as such: ```ts import { DefaultSession } from "@auth/core/types";...

JSX alternatives?

Are there any that I could use with Solid, Im very tired of html and its closing tags

Difficulties using Pdfjs-dist with SolidStart

I'm trying to use Pdfjs-dist with SolidStart. It works in developer mode but when I try to create a production build it fails with the error in the build-err.txt file I've attached. I've also attached the PdfViewer component code and the route I'm loading the PdfViewer into. I'm already using unstable_clientOnly to load in the module....

createResource not updating on error

I can't seem to figure out how exactly createResource is supposed to work when the fetcher throws an error, this is the barest reproduction I can do

Using SolidJS Playground in custom docs

I'd like to use the solidjs playground for interactive documentation of my library. (Should I use sandpack instead?) I noticed that an old version of solid-repl has been published to npm, but it hasn't been updated in a year. Meanwhile solid-playground seems to be chugging along, but it's not published. How can I use solidjs playground (or an equivalent live code editor) for my documentation? Thanks in advance!...

Favorite way of dealing with typescripts `!`-forbidden warnings

For example, I often do: ```jsx const MiddleContainer: ParentComponent = (props) => { const { isAuthenticated } = useAuthState()!;...