SolidJS

S

SolidJS

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

Join

Why can't I change the path alias "~/*" to "@/*" in the tsconfig.json?

Using @/* would be easier on my keyboard. After changing it the imports work correctly in VS Code typescript, but when I run the app it complains that modules are not found. Trying to change the alias to anything else other than ~/* (eg. src/*) also doesn't work. Do I need to change it somewhere else to make it work for runtime?...

Does SolidStart support private folders in the routes directory?

Like described here: https://nextjs.org/docs/app/building-your-application/routing/colocation#project-organization-features Otherwise, is there a way to organize the components used for a route in a subfolder of the folder the route is in? Or is there any way to opt out a file or folder in the routes directory from the routing system?...

Preloading Data with 'use server'

I'm following the limited documentation, and I want to preload data from the server for a route: ```ts import { Title } from "@solidjs/meta"; import { RouteDefinition, cache, createAsync } from "@solidjs/router"; import { getAbout } from "~/lib/about";...

Tailwind CSS Styles Not Applied After Adding SolidJS Routes, Why ?

I encountered an issue after integrating SolidJS routes into my project. I created components for different sections and then imported them into respective pages's compoenent like home.jsx and services.jsx and then imported them into app.jsx , Initially, styles were visible before routing, but after routing, only simple HTML pages were displayed without styling. I'm unsure about where to add routes, as I have both index.jsx and app.js. Seeking assistance to understand why Tailwind CSS is not applied after routing and how to resolve this issue and understanding why Tailwind CSS is not being applied after routing. Below is my js.config.js : ```js module.exports = { content: [ "./src/*/.{js,jsx,ts,tsx}",...
No description

Are store reactive?

```ts const [params, setParams] = createStore<Params>( props.value ?? { data: [ { points: 100, requirement: 10 },...

Render a new router and redirect in action of opened component doesn't redirect in the opened window

Example codes ``` export function winOpen(provider: string) { if (window) { const win = window.open(...

Slow table paint/display

I have this table that takes a few seconds to display coz its painting, the api call is only about 500ms, but it takes bout 3-4 sec to paint. Not sure how to read this, any ideas on how i can speed it up? code: https://playground.solidjs.com/anonymous/fb9a05d0-248d-4cbb-a31b-ddb2ea2f9ad7...
No description

Help Me Stop Theme Flashing In SolidStart

I built a theme switcher using SolidStart. It works great, with one exception. On page reload, the theme flickers or flashes. It's happening because I'm using SSR mode. As a result, my ThemeProvider doesn't load the theme until the page loads. I believe I need to check the theme on the server so I can set the theme before my page loads using something like https://github.com/donavon/use-dark-mode/blob/develop/noflash.js.txt....

Vite error when evaluating SSR module

Getting this error when navigating to a route ``` 2:52:46 p.m. [vite] Error when evaluating SSR module #vinxi/handler/ssr: failed to import "/src/entry-server.tsx" |- TypeError: vite_ssr_import_0.template is not a function...

global state for auth

how can i manage global state for a jwt in solid?

URL Query Parameters

This may be a silly question, but for URL Query parameters, so not something you pass through the route mechanism as someurl/:id/:something, but rather the type you would pass as someurl?param=something, is there a special solidJS way of handling those, or do I just use standared window.location.search, possibly wrapped in a URLSearchParams?

Mapping props to attributes

A common pattern that comes up for me is creating components that expose the html attributes of their underlying element, while merging in their own values and defaults. For example something like this (this is not expected to work - just an example): ```ts // MyButton.tsx type Props = {foo:string} & JSX.HTMLAttributes<HTMLButtonElement> const defaults = { foo:"bar", class:"my-button" }; ...

Form validation help

Hi, I am trying to use the form validation example (https://www.solidjs.com/examples/forms) from Solidjs site but getting an error "Property 'use:validate' does not exist on type 'InputHTMLAttributes...." in my tsx file. How do I get around this problem? I have a simple 5 field form that needs some validation but the provided example seems complicated, to me at least. Appreciate any help/guidance. Thanks

equivalent of React.detailedHTMLProps<T>?

Trying to use a webcomponent in my solid project. It says that to interface with React using typescript, I add this to my jsx: ```tsx declare global { namespace JSX {...

how to deploy a website built with the solid.js framework on vercel?; troubleshooting

I deployed my Solid.js project on Vercel using GitHub, initially selecting Vite as the framework. However, the deployment failed due to some file path issues, which I resolved by correcting the paths and deleting the pnpm file. Did deleting the pnpm file affect the project and cause it to fail? Afterward, I changed the build command to a different one found in the scripts, but then reverted it back to the original. Despite these adjustments, the project still isn't working. Although the local bu...
No description

Wrapping `<FileRoutes />` in `ErrorBoundry`

Im trying to migrate from the pre 1.0 day, when solid-start cli was still a thing. Back then I was able to do smth like this in the root component: ```html <Body> <Suspense>...
No description

How do I build my component?

Hi guys 👋 I'm a bit confused about how I could build a SolidJS component into JS that I could publish on NPM, and that my users could integrate on their website. 1. I can't find any info about that on the documentation....

Practice of handling application globals in Solid(Start) symmetrically across client and server?

Example: In the CSR-only days it was idiomatic to store context value as a module-global value:
```jsx // file: counter.jsx import { createSignal, createContext, useContext } from "solid-js";...

Ideal way to load settings/configs

Suppose I have a bunch of settings like user preferences (dark mode), or configs which I load using an API, How should I save and load these settings on start. Should I just save these settings in localstorage, and then use onMount() in the main App component to set the signals for all my configs? Or is there some better way?...