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

6 Replies

Brendonovich•4mo ago

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

gerardOP•4mo 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•4mo 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•2mo 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•2mo ago

Alright very interested in tracking this down.

Brendonovich•2mo ago

tyty ❤️

Gaming

Programming

crazy bug global store + solid router