SolidJS

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

SolidJS

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

6/17/2024

Routing: Component/UI Element not rendered

Running with the dev server, I have been having a frequent problem with routing. I think it is related to adding new routes but haven't been able to confirm that. A demo of the problem is here: https://youtu.be/iykA-sMtf3E I didn't realize my mouse was not being captured so here is what is happening...

George

6/17/2024

`class` vs `classList` behaviour

Hello! Currently doing something like ``` const InternalInbox = () => {...

Bit

6/17/2024

How to set URL for static assets?

Trying to have static files served from S3. ```ts import { defineConfig } from "@solidjs/start/config"; ...

Mtlive

6/17/2024

Solid Start Nested Router

Hi Guys! How to Implement Partial Page Refresh (Nested Routing) I am developing an admin dashboard with a top navigation bar, a left-side menu, and a right-side content area. I am not sure how to simultaneously handle a standalone login page and update the right content area by clicking on the left-side menu using a single file routing approach. ...

SomeRandomNiko

6/17/2024

Reactivity issues with array items

Hey, I am having trouble figuring out how to create an effect that only runs when a property inside an object inside an array changes. I have a store that is a top level array and contains objects with an id and some content (which can be null). https://playground.solidjs.com/anonymous/b6728a0c-03a2-48e8-b8d7-27e483d22a8a In this playground I set up a minimal example. The effect logs the containers with content (where the content is not null) to the console....

Jack Vane

6/17/2024

Using Lucide Icons removes all components from the DOM.

I have a simple task of just loading icons to a page in Solid Start. src/routes/index.tsx ```jsx import { Title } from "@solidjs/meta";...

slainless

6/17/2024

Help with context and storybook

Any advice/guess why the consumer is not receiving the value i set on provider and instead got the default value? It definitely works in dev... Thanks....

Luka

6/17/2024

Sevoral

Hey I am frequently getting sevoral errors I am guessing its parsing library, couldn't find documentation about it.
So I noticed it happens when I don't use JSON.stringify when sending data from server or don't use solidstart built in json function. If you could explain me how these work and link me documentation about Sevoral it would mean a lot....

enteleform

6/16/2024

Broken reactivity @ `vite-plugin-solid` with `{dev:false}`, but works fine with `{dev:true}`.

Context - I'm using render from solid-js/web to render content for an Obsidian extension. - Reactivity is breaking for the Icon component from @iconify-icon/solid, but the issue is not present when {dev:true} is set in vite-plugin-solid....

Bit

6/16/2024

npm run build fails if outDir is changed

``` import { defineConfig } from "@solidjs/start/config"; export default defineConfig({ vite: {...

Tim Basel

6/16/2024

`vite-plugin-solid` ignores/removes `/** @jsxImportSource ... */` pragma comment

I'm trying to use a custom JSX runtime for a single file using the @jsxImportSource pragma comment. Unfortunately it seems like that the vite-plugin-solid or maybe the babel-plugin-jsx-dom-expressions it uses replaces/ignores/removes these pragmas, so that all JSX functions in the compiled output always call template function from solid-js. If I remove the solid plugin from the vite.config.js file, the custom JSX runtime works correctly, but then I don't know how to get Solid to render correctly. For reference, here is part of the file where I want to treat the JSX as raw XML and render it using the xml-jsx-runtime package. ```tsx...

Mr Void

6/15/2024

nested router, root leads to 404

I wish have the waterfall effect on rendering parent -> child components but I'm facing an issue with the following configuration. When I navigate to /flashcards I get redirected to Page404. ```tsx <Router> <Route path="/" component={allowAuthenticated(AppContainer)}>...

Luka

6/15/2024

Busboy "missing content-type" error

I am trying to use Busboy with Solidstart API, So I have POST api where form sends file, but I think busboy reads headers in a way that is not valid for my headers, const bb = busboy({headers: request.request.headers }) request.request.headers return headerList where busboy tries to read content-type but it fails because its within the _HeadersList {...

aabluedragon

6/15/2024

Importing external .d.ts declarations for Web Components

See https://stackoverflow.com/q/78626992/230637

sabercoy

6/15/2024

ErrorBoundary reset() method

what is reset() supposed to do? ```tsx import { action, cache, createAsync, reload, useAction } from "@solidjs/router"; import { ErrorBoundary, Suspense } from "solid-js";...

TutoDS

6/15/2024

Google Fonts

Hi everyone What is the best way of loading Google Fonts on my project?...

hillel800

6/14/2024

Hydration Mismatch error when resource passed as a prop

Hey! I have a simple component that creates a resource, and then passes it to a child comopnent, but when I put the child component in a Show component to check when resource.state is 'ready', I get a Hydration Mismatch error. As a side note, when I pass the prop without the Show component, I just don't get the updated data passed down, which I don't understand, since in the docs it says that in order to keep the reactivity it has to be done the way I did it. Thanks 🙂...

TutoDS

6/14/2024

Solid with Sanity CMS

Hi everyone Anyone using Solid with Sanity CMS?...

dows-

6/14/2024

Optimistic UI with useSubmissions/useSubmission not working

I'm trying to use useSubmission to show optimistic UI but I can't get it to work, the pending state never gets shown. I've followed along with this blog post https://www.brenelz.com/posts/optimistic-ui-with-solid-start/ and the "pending" todos never show, the todos from the server just pop in after the promise has resolved. StackBlitz here https://stackblitz.com/edit/github-a9ukgq-sypzel?file=src%2Fpages%2FHome.tsx...

ChrisThornham

6/13/2024

What Replaced createRouteData?

In older version of SolidStart you could get all routes in a folder. This was useful for doing things like getting all blog articles. It worked like this: ```typescript export const routeData = () => { return createRouteData(async () => {...

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.