SolidJS

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

SolidJS

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

1/15/2023

Generate random numbers serverside and don't regenerate on hydration

I'm trying to generate a list of random numbers for a skeleton loader, and I've found a solution, but it does not feel like the right way to do this. ```tsx const [randomsResource] = createResource(() => [""], { initialValue: [...

Vexcited

1/14/2023

How can we lazy load route data using @solidjs/router ?

When using this pattern: ```javascript import UserData from "./pages/users/[id].data.js"; const User = lazy(() => import("/pages/users/[id].js"));...

FutureLights

1/13/2023

Context In Typescript

I'm trying to create a context in Typescript following this example, but copying and pasting the code results in an error when I try and use the ThemeContext.Provider in the ThemeProvider Component. https://www.solidjs.com/examples/context Cannot find namespace 'ThemeContext'....

Razboy20

1/13/2023

Vercel + Prisma

Hopefully someone here can help with my issue, but I'm trying to use Prisma with solid + vercel, however I'm getting an error that "no such file or directory, open '/var/task/schema.prisma'". The issue is, that file should exist. I have other projects on vercel with solid + prisma which work fine, and I have absolutely no idea what is wrong with this one. My package.json includes a vercel-build with

"prisma generate && solid-start build && cp node_modules/.pnpm/**/@prisma/engines/*query*  .vercel/output/functions/render.func/ && cp prisma/schema.prisma .vercel/output/functions/render.func/"

(To copy over the prisma engine/schema into the render function), however the error still appears, even though I am sure the files do get copied....

DanteOz

1/12/2023

Server rendering error on createResource. Inconsistent HMR.

I am currently get this error when calling npm run dev and npm run build just hangs. ```bash GET http://localhost:3000/ An unhandled error occured: TypeError: Cannot read properties of undefined (reading 'id') at Proxy.createResource (/Users/rexor/projects/fastsearch/solid/node_modules/solid-js/dist/server.cjs:412:35)...

FutureLights

1/12/2023

Set Timeout Example

I want to update a single every x seconds in a component. Are there any examples of this I can look at? Right now this is my approach, but it is not working. I can't seem to find any examples anywhere. ``` import { render } from "solid-js/web"; import { createSignal, onMount } from "solid-js";...

lili/lilith

1/12/2023

How to make an Isomorphic Component Library?

What's the proper way to deploy a SolidJS component library with isomorphic rendering?

Michael P. Jung

1/11/2023

How to access browser language during SSR?

In an SPA you would normally access navigator.language but during SSR the navigator is undefined. How can I access the browser language/locale during SSR?

Baptiste

1/11/2023

Currently, I need to give default values to component properties if I want them to be registered: ```ts customElement( 'typebot-standard',...

Tur

1/11/2023

how to make a route working after page reload

Hello! I bumped into a nasty problem with solid-route.
It works while I'm surfing from the root page to other pages. But once I refreshed a page, that is not root, it stop working. It throws 404. The mistake is showed just on production build. When I use npm start it works properly. What may be the reasons?...

XxX_MLG Noob_XxX

1/11/2023

Does SolidStart Have a Global `Context` That Server Functions Can Use?

Other SSR frameworks have a concept of a "context" that is globally available to all server functions. For instance, Svelte Kit has event.locals (https://kit.svelte.dev/docs/load#shared-state), which can be set at the server entry point (hooks.server.ts). This context info is then available to all of the server data loaders. Similarly, Remix passes a context argument to its loader and actions. The value of context can be set by getLoadContext (https://remix.run/docs/en/v1/route/loader#context). Does SolidStart have anything similar? Or are there at least plans to add something like this in the future? Having a global context is really helpful when it comes to user identifiers....

Boku 🜲

1/11/2023

how do i make my component to accept class and classList ?

baxuz

1/10/2023

disposing of a `createRoot` nested inside a `createEffect`?

I am creating a nested effect, like: ```ts createEffect(() => { // create nested effect...

Your local wobbler: Suya

1/10/2023

SSR build failing

I'm attempting to get solid SSR working with deno via esbuild and esbuild-plugin-solid. In order to access solid, I have an import map where solid-js uses npm:solid-js and solid-js/web, ditto. In order to run the app, I need to import the SSR build. However, the following error occurs ```...

Tom

1/10/2023

solid-router nested routes - access child params from parent component

It seems like a parent component can't access the full set of params - it can't see params for child routes. Is that right? I get the logic but I have a classic master/detail view, list on the left, with a selected item showing up on the right. In the list I need to be able to detect which item is active, which depends on the nested route param which is not available. My routes:...

Razboy20

1/10/2023

Math.random() overwritten on hydration

I have a skeleton component which I want to have a slight randomness to its width, so I have

<span class="skeleton-text text-clip whitespace-nowrap">{"a".repeat(7 + Math.floor(Math.random() * 20))}</span>

<span class="skeleton-text text-clip whitespace-nowrap">{"a".repeat(7 + Math.floor(Math.random() * 20))}</span>

However, on hydration, the inner text of the span is removed....

bigmistqke

1/9/2023

how to add package to https://www.solidjs.com/ecosystem?

I made a package and would like to add it to the solidjs website. Is there a write-up somewhere how to contribute?

bigmistqke

1/9/2023

window.getComputedStyle returns react-style CSSStyleDeclaration?

if i const style = window.getComputedStyle(node) style has type CSSStyleDeclaration which follows react's camelCase formatting. I could cast it to JSX.CSSProperties but JSX.CSSProperties allow for numbers | string while window.getComputedStyle only returns string. what would be the solid way to type this?...

Revxrsal

1/9/2023

add fade-in and fade-out animations when navigating routes (using solid-routes)

o/ is there any way to add some sort of fade-in and fade-out animations when navigating between routes? this is what i basically have at the moment ```ts <ErrorBoundary fallback={<p>some problem</p>}> <Routes> <Route path="/" component={Home}/>...

Ho-kage

1/9/2023

Loading google fonts

I'm trying to load a google font with the <Link> component but it doesn't seem to be working <Link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Recursive:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> It puts an <a> tag in the body with link=true as an attribute but nothing the font is not working....

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.