crazy bug global store + solid router

inconsistently I am hittin the following crash

App.jsx:20 TypeError: Cannot read properties of undefined (reading 'startsWith')
    at resolvePath (utils.js?v=9d490caa:16:27)
    at Object.resolvePath (routing.js?v=9d490caa:407:20)
    at Object.fn (routing.js?v=9d490caa:14:35)
    at runComputation (chunk-MRDUEL7O.js?v=9d490caa:713:22)
    at updateComputation (chunk-MRDUEL7O.js?v=9d490caa:696:3)
    at runTop (chunk-MRDUEL7O.js?v=9d490caa:806:7)
    at runQueue (chunk-MRDUEL7O.js?v=9d490caa:880:42)
    at completeUpdates (chunk-MRDUEL7O.js?v=9d490caa:835:10)
    at runUpdates (chunk-MRDUEL7O.js?v=9d490caa:824:5)
    at completeUpdates (chunk-MRDUEL7O.js?v=9d490caa:875:17)

App.jsx:20 TypeError: Cannot read properties of undefined (reading 'startsWith')
    at resolvePath (utils.js?v=9d490caa:16:27)
    at Object.resolvePath (routing.js?v=9d490caa:407:20)
    at Object.fn (routing.js?v=9d490caa:14:35)
    at runComputation (chunk-MRDUEL7O.js?v=9d490caa:713:22)
    at updateComputation (chunk-MRDUEL7O.js?v=9d490caa:696:3)
    at runTop (chunk-MRDUEL7O.js?v=9d490caa:806:7)
    at runQueue (chunk-MRDUEL7O.js?v=9d490caa:880:42)
    at completeUpdates (chunk-MRDUEL7O.js?v=9d490caa:835:10)
    at runUpdates (chunk-MRDUEL7O.js?v=9d490caa:824:5)
    at completeUpdates (chunk-MRDUEL7O.js?v=9d490caa:875:17)

when using a global store + createMemo something on solid js router crashes!

// session.store.js
import { createRoot } from "solid-js"
import { createStore, reconcile } from "solid-js/store"


function sessionStore () {
  const [session, setSession] = createStore({})

  return {
    session,
    setSession,
    fetchSession: () =>
      fetch("/api/v1/session").
            then(res => res.json()).
            then(data => setSession(reconcile(data) /* crash starts here, on setSession*/)),
  }
}

export default createRoot(sessionStore)

// session.store.js
import { createRoot } from "solid-js"
import { createStore, reconcile } from "solid-js/store"


function sessionStore () {
  const [session, setSession] = createStore({})

  return {
    session,
    setSession,
    fetchSession: () =>
      fetch("/api/v1/session").
            then(res => res.json()).
            then(data => setSession(reconcile(data) /* crash starts here, on setSession*/)),
  }
}

export default createRoot(sessionStore)

// on of my components
import s from 'session.store.js'

export default function Profile () {
    const navItems = createMemo(() => [
          { /* array of js objects */ },
          // some objects do
          { hidden: s.session.IsVerified }
        ].filter(i => !i.hidden))

// then i use nav items to render a <ul>

// on of my components
import s from 'session.store.js'

export default function Profile () {
    const navItems = createMemo(() => [
          { /* array of js objects */ },
          // some objects do
          { hidden: s.session.IsVerified }
        ].filter(i => !i.hidden))

// then i use nav items to render a <ul>

And it is crashing on the router, why? the most crazy thing is that it is a little bit random, same code wasn't crashing at some time, and then it started to crash several times in a row without changing anything, I tried clearing site data several times and restart vite and it still happened it only happens when i reload the SPA to start deep in the route that is rendering Profile if instead i navigate it works

8 Replies

Brendonovich•5mo ago

can you reproduce this in stackblitz? it's hard to say what's happening without a reproduction

gerardOP•5mo ago

I've been able to replicate it https://stackblitz.com/edit/solidjs-templates-kvsrfn?file=src%2Findex.jsx seems like the bug actually comes when Nested Index rendering A and then the links change based on reactivity and A tries to evaluate a route with path undefined

n0ttr

StackBlitz

Solidjs - Templates (forked) - StackBlitz

Vite + solid templates

Brendonovich•5mo ago

@ryansolid i think i've ran into this before, sometimes path in resolvePath is undefined, i assume it's some weird result of being in a transition

Brendonovich•3mo ago

@ryansolid I've made an issue for this, seems to be a more general createMemo problem. We keep running into it while using kobalte components in routes that load data during transitions, I'm patching kobalte to get around it for now.

GitHub

createMemo sometimes returns undefined when called during a transit...

Describe the bug In some cases, createMemo is returning undefined during navigation transitions. We've observed this mainly from using Kobalte components in our main route that gets navigated t...

ryansolid•3mo ago

Alright very interested in tracking this down.

Brendonovich•4w ago

tyty ❤️ @ryansolid would you be able to check this one out in january? i'm running into it once again porting tanstack router to solid, this time it's surfacing as accessing the value in a Show callback is throwing stale read errors, even though the when condition is valid, so the internal createMemo must be returning undefined

ryansolid•3w ago

I really needs some sort of reproduction on this one. Because looking at the code and what you've written to be the problem we are still missing something. The if the Transition is running then the memo will be added to it so the only places it would miss I'd think is if it isn't running and the memo isn't part of it, but then it should fine?...

Brendonovich•3w ago

I can provide a repro with tanstack router if that’d be helpful, but I haven’t figured out how to get a min repro yet

Gaming

Programming

crazy bug global store + solid router

Did you find this page helpful?