snorbi Comments - Answer Overflow

snorbi

Posts Comments

SSolidJS

•Created by snorbi on 3/3/2025 in #support

Navigation error

It is not async, it is a normal function.

6 replies

SSolidJS

•Created by snorbi on 3/3/2025 in #support

Navigation error

If I replace <Title>{title()}</Title> with

  createEffect(() => {
    document.title = title()
  })

  createEffect(() => {
    document.title = title()
  })

then the error is gone 😮

6 replies

SSolidJS

•Created by snorbi on 3/3/2025 in #support

Navigation error

It is caused by a solidjs/meta <Title> component but I still don't understand how and why 🤔

6 replies

SSolidJS

•Created by snorbi on 3/3/2025 in #support

Navigation error

Stack trace:

dev.js:1074 Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')
    at cleanNode (dev.js:1074:65)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
updateComputation    @    dev.js:786
runTop    @    dev.js:905
runQueue    @    dev.js:979
completeUpdates    @    dev.js:934
runUpdates    @    dev.js:923
(anonymous)    @    dev.js:622
Promise.then        
startTransition    @    dev.js:604
transition    @    routing.js:365
(anonymous)    @    routing.js:472
untrack    @    dev.js:519
navigateFromRoute    @    routing.js:434
(anonymous)    @    routing.js:483
ActionBarToolbar2._el$283.$$click    @    index.tsx:636
handleNode    @    dev.js:890
eventHandler    @    dev.js:915

dev.js:1074 Uncaught (in promise) TypeError: Cannot read properties of null (reading '1')
    at cleanNode (dev.js:1074:65)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
    at cleanNode (dev.js:1074:50)
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
cleanNode    @    dev.js:1074
updateComputation    @    dev.js:786
runTop    @    dev.js:905
runQueue    @    dev.js:979
completeUpdates    @    dev.js:934
runUpdates    @    dev.js:923
(anonymous)    @    dev.js:622
Promise.then        
startTransition    @    dev.js:604
transition    @    routing.js:365
(anonymous)    @    routing.js:472
untrack    @    dev.js:519
navigateFromRoute    @    routing.js:434
(anonymous)    @    routing.js:483
ActionBarToolbar2._el$283.$$click    @    index.tsx:636
handleNode    @    dev.js:890
eventHandler    @    dev.js:915

6 replies

SSolidJS

•Created by snorbi on 2/11/2025 in #support

Error during navigation

The <Show> component uses a condition whether the page should be displayed at all (by validating parameters in the URL), or redirected to a fallback page using a <Navigate>. Maybe this is not the best solution for redirecting to another page based on a condition?

6 replies

SSolidJS

•Created by snorbi on 2/11/2025 in #support

Error during navigation

It seems I found it by experimenting and commenting out navigation-related code fragments. It took a long time 😦 I had <Navigate> components inside the fallback parameter of Show components on the problematic pages. Removing the <Navigate> fallbacks solved the problem.

6 replies

SSolidJS

•Created by snorbi on 2/11/2025 in #support

Error during navigation

I just don't find any determinism in its behaviour 😦 Sometimes it works but most of the times it throws the above error. The pages are fairly complex, so I cannot extract a minimal reproducer easily 😦

6 replies

SSolidJS

•Created by snorbi on 2/6/2025 in #support

Calling a JSX event handler explicitly

I didn't know this trick with Omit, it is nice, thanks 🙂

7 replies

SSolidJS

•Created by Md Shehab on 2/6/2025 in #support

Third party authentication

Auth.js has SolidJS support: https://authjs.dev/reference/solid-start It supports OAuth: https://authjs.dev/getting-started/authentication/oauth (Please note: I have not used it, I have only read about it.)

4 replies

SSolidJS

•Created by snorbi on 2/5/2025 in #support

Related components

Thanks a lot! 🙏 I should learn more from existing code 🥹

3 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Access ref in child component when using forwarding refs

Thanks @peerreynders for the detailed explanation. I will pass listeners instead, it is a much more clean solution 🙂

6 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Access ref in child component when using forwarding refs

I'm a bit lost how refs work 😦 What I try to achieve is to create a component which wraps various children 3-4 components deep, and to propagate the ref of the deepest component to the top level component. It is something like:

ValidatingInputFieldWithLabel
├─ InputFieldWithLabel
│  ├─ Label
│  └─ InputField
│     └─ <input>
└─ ValidationDisplay

ValidatingInputFieldWithLabel
├─ InputFieldWithLabel
│  ├─ Label
│  └─ InputField
│     └─ <input>
└─ ValidationDisplay

(I know it is not ideal from an "encapsulation" viewpoint. I have other ideas how to solve the problem but I'm very curious whether it is possible to propagate refs "upwards".) What I would like is to know the ref of the <input> at the level of ValidatingInputFieldWithLabel, so I can add event listeners to the <input>. What is the best solution? Besides, can someone explain what is the magic behind the ref feature? Until now I thought I understand it but now I'm a bit confused, e.g. how can I know that it is a simple Element or a Function? Or should I always check it at runtime in my custom components? Thanks.

6 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Access ref in child component when using forwarding refs

It works, thanks!

6 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Reactive context in built-in components

Thanks 🤯 I hope I will understand these one day 🥹 😆

9 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Reactive context in built-in components

Maybe I found them? https://github.com/solidjs/solid/blob/fff8aed62b4bff78a0016c3c08ba644652ccac18/packages/solid/src/render/flow.ts#L102 😄 This is rocket science 😄

9 replies

SSolidJS

•Created by snorbi on 2/4/2025 in #support

Reactive context in built-in components

Ohh, thanks. Then I looked at the wrong files, I was interested in the reactive variants... 😕

9 replies

SSolidJS

•Created by snorbi on 1/26/2025 in #support

How to extract common reactive code?

Thanks a lot for the detailed answer! 🙂

11 replies

SSolidJS

•Created by snorbi on 1/26/2025 in #support

How to extract common reactive code?

Thanks, I created this cute function 🤩

export function useCurrentTimeMinutePrecision(): Accessor<DateTime> {
  const [currentTime, setCurrentTime] = createSignal(getCurrentTimeMinutePrecision())

  let timer: NodeJS.Timer
  onMount(() => {
    timer = setInterval(() => {
      const now = getCurrentTimeMinutePrecision()
      if (!now.equals(currentTime())) {
        setCurrentTime(getCurrentTimeMinutePrecision())
      }
    }, 1_000)
  })
  onCleanup(() => clearInterval(timer))

  return currentTime
}

export function useCurrentTimeMinutePrecision(): Accessor<DateTime> {
  const [currentTime, setCurrentTime] = createSignal(getCurrentTimeMinutePrecision())

  let timer: NodeJS.Timer
  onMount(() => {
    timer = setInterval(() => {
      const now = getCurrentTimeMinutePrecision()
      if (!now.equals(currentTime())) {
        setCurrentTime(getCurrentTimeMinutePrecision())
      }
    }, 1_000)
  })
  onCleanup(() => clearInterval(timer))

  return currentTime
}

And it seems to work 😄

11 replies

SSolidJS

•Created by snorbi on 1/26/2025 in #support

How to extract common reactive code?

Wdym with this?

I mean that somehow prevent it to be called from a non-reactive context. Is there for example, some Typescript typing "trick" that can check it at compile-time? Or isn't it that simple? 🙂

11 replies

SSolidJS

•Created by snorbi on 1/21/2025 in #support

Solving "computations created outside ..." using `createMemo() ?`

Thanks @mdynnl for looking into it. I don't understand the "ternaries" part deep enough but it is good to hear that createMemo() is the good solution here 🙂 (Although it does not seem to solve the warning in case of your example, it solves it in my code.)

17 replies

Gaming

Programming