SolidJS

S

SolidJS

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

Join

Deploying changes to SolidStart app then navigating the application throws strange error

Before I file this as an official issue or start nagging the rest of the team I want to make sure I'm not deploying or thinking about the issue incorrectly. Basically I'm deploying a SolidStart app on Cloudflare Workers, loading it on my browser, pushing a deploy and noticing that when I navigate between pages an error is thrown. I could be wrong but it seems to happen mostly with Outlets. When I navigate to a page with one, the application loads the nested chunked script that was compiled newly while the one currently cached in browser is older. Hence the child trips up and throws an error because the function it depends on no longer exists. So I see a lot of red errors as a result. How should I be deploying this to ensure that the function names between versions remain consistent and my deployments don't break? or is this a bug with Start's default config....

Why can't I access `useParams()` in `onClick`?

If I do ``` const handleClick = () => { console.log('useParams():', useParams()) // ......

Documentation example of context with typescript does not work

I copied the context example (CounterContext) from the docs to a solid start project. The first error I get is when I pass the store to the Context Provider value: "Type '({ count: any; } | { increment(): void; decrement(): void; })[]' is not assignable to type '({ count: number; } | { count?: undefined; })[]'". Then when I use the useContext example I get the following error "Property 'increment' does not exist on type '{ count: number; } | { count?: undefined; }'" (same for decrement) and when...

Router and createRoot

I recently upgraded my app from the old solid-app-router to @solidjs/router. It looks like, where I used to be able to use regular <a> tags and have them handled client-side by the router, I now have to use the <A> component. Is that expected? This has lead to a problem with a component that's created outside of the normal render hierarchy using createRoot (necessary because t's a ProseMirror node-view). Links in that component are giving me an exception with the message Make sure your app is wrapped in a <Router />...

CSS Transition does not get animated properly when applied in style={} directly

I have a navbar which I have animated (attached), however to achieve this effect I needed to go in a roundabout way. Basically, the transition needs to switch directions based on which path the user is navigating to, and the issue is that if I compute the transition in the style prop of the div, then the transition updates only after the transition has occurred, rather than influencing the transition. To solve this, I have an effect that sets the style programmatically before the signals are flushed, causing the transition to animate properly. ```tsx createEffect<number>((prevIndex) => {...

Route layout not define

What does this mean and how can i fix it. I am using storybook and i realize if there is an A tag in the component i get this error in my storybook.

How do I create a tree view with minimum updates on updating a child node.

I wrote one but when I add one node or delete a node, it updates the whole tree from scratch.

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....