gerard Posts - Answer Overflow

gerard

•Created by gerard on 9/15/2024 in #support

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

4 replies

SSolidJS

•Created by gerard on 8/2/2024 in #support

modularforms controlled/transform inputs not working

Hello, I am encountering multiple issues using modular forms with solid js many functionalities like controlled inputs and transforms seems like not work reliable, let me share with you some recordings here is a demo https://stackblitz.com/edit/modular-forms-solid-n51ey1?file=src%2Fapp.tsx This is regarding to transform on inputs but I've not been able to get to work controlled inputs either following the instructions here https://modularforms.dev/solid/guides/controlled-fields demo: https://stackblitz.com/edit/modular-forms-solid-mmn1cp?file=src%2Fapp.tsx I am attaching also video recordings

3 replies

SSolidJS

•Created by gerard on 8/1/2024 in #support

Pass props from Component to props.children

function Child (props) { return <div class={props.class}>child</div> }

function Parent (props) {
 // I want parent to be able to customize the props passed to children here
 // like for example the css class
  return <div>{ props.children }</div>
}

function App () {
return (
 <Parent>
     <Child />
 </Parent>
)
}

function Child (props) { return <div class={props.class}>child</div> }

function Parent (props) {
 // I want parent to be able to customize the props passed to children here
 // like for example the css class
  return <div>{ props.children }</div>
}

function App () {
return (
 <Parent>
     <Child />
 </Parent>
)
}

Things that I have tried and do not work:

function Parent (props) {
  return <div>{ props.children({ class: "test" }) }</div>
}

function Parent (props) {
  return <div>{ props.children({ class: "test" }) }</div>
}

function Parent (props) {
  return <div><Dynamic component={props.children} class="test" /></div>
}

function Parent (props) {
  return <div><Dynamic component={props.children} class="test" /></div>
}

10 replies

Gaming

Programming