SolidJS

S

SolidJS

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

Join

[h3] [unhandled] H3Error: Client-only API called on the server side. Run client-only code in onMount

I keep getting the above error I have SSR true in configs when i set it to false everything works alright As it told me that server side code might have some client code I looked back at my server code but didnt find anything specific to client code, what could be a solution? has anyone gotten the error before?

Solidstart Hydration error when using show and jsx element

I am moving my project to solidstart and i having an error with this component ```ts interface ArrowButtonProps extends AnchorProps { prefixIcon?: JSX.Element;...

Setting infinitely deep store?

I'm building a website builder, and my model looks like this:
type Element = {
elements?: Element[]
content?: Content[]
}
type Element = {
elements?: Element[]
content?: Content[]
}
...

Difference between `effect` and `createEffect`

I notice the docs recommend createEffect for effects from solid-js But effect also exists as an import from solid-js/web What is the difference between them?...

Behavior of query.set / cache.set

Hello, I am trying to preform some optimistic updates with the SolidStard data loading features. I've found the undocumented .set function on query (previously named cache) but can't seem to get it to mutate any data. Calling it seems to have no effect on createAsync stores. A couple threads have asked about this but have not received answers. Would anyone be able to shed light on the subject?...

How to improve list rendering performance?

Good evening, Just recently, i made a simple app with Solid. However, i'm a bit stuck at rendering list. Is there any best practice in Solid to render list? I suspect that I'm somehow doing something stupid since there is delay around 1~2s every time there is a mutation on the state and the list is getting rebuilt. The performance degradation is apparent when rendering a big list....

Error handling with chained resources.

Hello, I'm facing a problem with a chained "createResources". In a normal case, everything works fine. However, if the first fetcher throws an error, the error is not caught, which breaks the reactivity. ```const [getId, setId] = createSignal(1);...

How to handle reactivity in this example?

Hello. I have a Project type I have a context provider that provides the store of Project. So in my components I grab it like so - const { project, setProject } = useProject(). I have a separate components that is supposed to render project.nodes and it uses SortableJS. This component grabs project store from context and then renders items inside a custom Sortable component. It all works fine, until I try to update the state on reorder....

Server Side Fetching

Hi I want to fetch data from server side and render the title based on it's content like in PHP. I want to execute the fetch request to api from server side because I want to render the page to client when fetch is ready. ...

ServerSide fetching for metatags

Hi I am looking for server side fetching for open graph metatags. I want to execute fetch on server side and then render page with title and metatags filled in. If returned result from fetch has length of 0 redirect user to /404 page. My meta tags setup ```ts...

Throwing a redirect inside a query

When throwing a redirect from a query, the throw gets caught and returns undefined instead. The inferred return type is wrong in this case, but when throwing other values the throw is not caught. Is the query function typing wrong, or am I using query wrong? ```ts import { query, redirect } from "@solidjs/router" ...

Error when trying to use provider method

I have the following method setup in my /src/quickPlay/provider.tsx file: ```ts const stopAllSounds = () => { store.sounds.forEach((sound, index) => {...

actions: I can't tell if this is a bug or a feature

If I submit an action and then immediately re-route, the action is just gone. If the response is being streamed in, I can't observe the response on an effect from a component higher up than both the current and target routes. When I don't navigate, the effect in the higher component can see the data - no problem, but when a navigation occurs while the data is being streamed in, the effect stops reacting to the new content coming in. Remix had a similar issue with fetcher's (remix submissions) lifetime being tied to component lifecycle. They recently changed it with a future flag called v3_fetcherpersist....

Google AdSense with SolidStart

Hi I want to include google adsense in my solid start website. I think I've done everything what I had to do. My problem is that ads does not display on my page. There are just empty spaces for them to load. 😦 ...

Project Structure and Build Output Configuration

Hi there, I need assistance with configuring my project to build the output folder one directory above the current level. This setup is necessary due to hosting requirements. Specifically, my hosting provider mandates that the main JavaScript file (app.js) and package.json be located in the same directory, with the type field in package.json set to commonjs. Here’s the structure I aim to achieve:...

Component type

On the documentation I saw this example : ```tsx import { type Component } from "solid-js"; const MyTsComponent(): Component = () => {...

Help: Preflight OPTIONS Requests In SolidStart. I'm Lost!

The docs give the following examples for methods in API routes. ```typescript export function GET() { // ......

Problem in Canvas

Does anyone know why this problem happens? The size of the Canvas is 64x64, and the Tiles are 16x16.

How to prevent re-creation of a component inside <For>?

Hi everyone. To illustrate my issue, I created a very minimal version of the application that I have. To see the problem I am facing, just click on any of the links in the rendered page and then click on the button that appears. You will notice that the button will disappear (because the component gets re-created and the state is reset). What would be the best approach to prevent this from happening? https://codesandbox.io/p/devbox/r5k78c...

[error] Client-only API called on the server side. Run client-only code in onMount, or conditionally

I everyone I'm facing this error when try to deploy my website:
[error] Client-only API called on the server side. Run client-only code in onMount, or conditionally run client-only component with <Show>.
Already try to deploy in two places, without success....
No description