SolidJS

S

SolidJS

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

Join

Subscribe to any unknown store change

Hi. Is there a way to subscribe to a store change in unknown property? I have a store: ```tsx type StoreValue = Record<string, number>; ...

WebComponent Support

I am trying to use a WebComponent based package - so i tried: ```ts declare global { namespace JSX { interface IntrinsicElements {...

WebSerial Support

I am trying to use the WebSerial api and i keep getting
Property 'serial' does not exist on type 'Navigator'
Property 'serial' does not exist on type 'Navigator'
How do i use the WebSerial API with Typescript and SolidJS?...

Project Structure

Hi everyone, I am new to SolidJs and would like to ask you for some advice and best practices. I have downloaded a template on SolidStart. The goal is to create a mobile app with a bottom nav. ...

How to modify HTMLElement after script loads / elements render?

I'm using @solid-primitives/script-loader to load an external component : ``` var [script, remote] = createScriptLoader({ src: commentoURL, onload: async () => {...

createEffect doesn't fire for a memo passed as prop to a third party component

Everything works perfectly in dev mode, but when I do vite build and vite preview, it doesn't trigger update breaking the ui, this happens on the live site. so please fix this asap. The example repo is here https://github.com/eguneys/aidchess-hardcore/blob/master/src/predict.tsx#L145 https://github.com/eguneys/chessreplay23/blob/master/src/view.tsx#L10...

How do you refer to a deeply nested component?

Take the two tweet buttons in the screenshot for example, I would like to focus on the tweet textarea when the user clicks on the big tweet button. How can this be done? Thanks!

Sentry in Solid / Vercel

Would anyone be able to assist with setting up Sentry in my Vercel deployment that hosts Solid? Releases are being created, commits are being seen, it's just that sourceMaps are not being uploaded (automatically). Looking forward to some help!...

SolidStart - How do I build and start server in different directory?

After running npm run build, a dist folder w/ content is created. If I move the dist folder into another directory, I have to copy the package.json file and npm i --omit=dev in the new directory for it to run without errors. My confusion is why I'm having to manually copy the package.json file? Is this the correct way to do it, or am I misunderstanding? ...

Network issues with Solid

Running a solid SPA on localhost with backend server, using bun vite I am running all this in wsl. I am having strange issues with my axios api calls to my backend returning errors after certain ux paths and app pretty much freezing on hard refresh. If I rerun the server and frontend it will work fine until I do the same path or hard refresh after a certain path. I also get a strange error message after maybe 5min and the app just crashes it is: crbug/1173575, non-JS module files deprecated. (anonymous) @ VM10:6744 ...

API failing

Suddenly my API calls stop working using createResource and createQuery(Tanstack)

How do I lazily load stylesheets for different pages

I have a single page application with solid router: I have different routes loaded like this ``` ...

Trigger animation using Motion One for Solid

Is there a way to manually trigger animations using motion one for solid? The regular Motion library has an animation.play() method, but I don't see how to do the same think using Motion Solid. The problem I'm trying to solve is that I'm using Motion in a component, but the animation does not play when I pass that component to a second component as a child (props.children) and try to render it in the second component....

Accessing parts of a Store (sub store, substore)

I ran into some typing issue with stores. I've got a component that expects a data: T[] and setter: SetStoreFunction<T[]> . This is all fine when passing in a complete store as created by createStore(...) but breaks down if I want to pass a part around: e.g. ```tsx <Foo...

UND_ERR_REQ_CONTENT_LENGTH_MISMATCH error when navigating to index route

My index route looks like this ```tsx export function routeData() { return createServerData$(async (_, { request, fetch: fetcher }) => {...

Pass prop into style={{}} on hover

I need to send a hex-color into the styles that depends on my data, specifically ``` '&:hover': { color: props.color
}...

Global style tags get added before page is actually visible

I'm trying to get a better understanding of how data loading works in Start. It seems that when I have a <Style> tag in a layout, but the actual route takes a long time to load, the Style tag will still render even when the rest of that route is not. Here's the repro: https://github.com/nonphoto/solid-test-global-page-styles

Control when child component is mounted

I am creating a mega menu component which is used in the following way: ``` <MainMenu> <MenuItem title="Products">...

Client only component (or client only createResource)

Hey... I've a component that renders button depending on browser capabilities, so it makes no sense to use ssr. I would like to wrap the capabilities check inside a createResource to use suspense / error boundaries (the browser check PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() returns a promise. ...

SolidStart on Plesk

Is it possible to host a SolidStart app at a hoster who supports Node.js via the Plesk "panel"? I have to specify a file to execute, would that just be dist/server.js?...