SolidJS•2mo ago

TypeError: Cannot read properties of undefined (reading 'when')

Has anyone seen this error before? Getting this error coming from the Switch component internals Some extra details: - There's no other children under the Switch apart from 4 Match components - The one that causes the error looks like this:

      <Match when={(props.messages?.length || 0) === 0}>
        <EmptyMessage />

        <Container>
          <PersistentBar />
        </Container>
      </Match>

      <Match when={(props.messages?.length || 0) === 0}>
        <EmptyMessage />

        <Container>
          <PersistentBar />
        </Container>
      </Match>

- This error is only reproducible when solid-js is build for production and not in dev server mode - I couldn't make a smaller reproducible version, could there be something outside of the Switch intefering with the rendering of the children? 🤔 I know it's a long shot to get an answer for this without a reproducible example but I'm hoping someone's seen this before an might have an idea, thank you 🙏

13 Replies

andiOP•2mo ago

if anyone else runs into something like this, it was caused by a resource somewhere else on the page that was triggering a suspense boundary that would hide the component containing the Switch it's still not clear why it was happening, almost seemed like a race condition in the rendering causing the bug, but putting a suspense boundary around the resource component stopped the Switch from being hidden and that prevented the bug

bigmistqke•2mo ago

something like

return (
  <Switch> 
    <Suspense><Match .../></Suspense>
  </Switch>
)

return (
  <Switch> 
    <Suspense><Match .../></Suspense>
  </Switch>
)

? i know Switch/Match works by passing the props of match inside the jsx: const Match = (props) => props which are then resolved in the Switch

andiOP•2mo ago

Not exactly This is what the structure of the component tree looked like from a high-level view

<Suspense>
  <TopBar>{someResourceBeingUsed()}</TopBar>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>

<Suspense>
  <TopBar>{someResourceBeingUsed()}</TopBar>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>

bigmistqke•2mo ago

that is weird

andiOP•2mo ago

the global suspense would make the switch component fail with that error i'm thinking it's a race condition of sorts because it didn't happen 100% of the time, maybe like 70/80% Fixed by doing

<Suspense>
  <Suspense>
    <TopBar>{someResourceBeingUsed()}</TopBar>
  </Suspense>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>

<Suspense>
  <Suspense>
    <TopBar>{someResourceBeingUsed()}</TopBar>
  </Suspense>

  <Switch>
    <Match>...</Match>
    <Match>...</Match>
    <Match>...</Match>
  </Switch>
</Suspense>

bigmistqke•2mo ago

very interesting would be good to post it as an issue in the solidjs github this seems like a bug

andiOP•2mo ago

it does but I haven't been able to make a minimally reproducible example yet

bigmistqke•2mo ago

i know they merge effects inside the jsx for performance reasons, maybe that could be a cause of bugs

andiOP•2mo ago

i thought it might also be related to the fact that suspense still mounts its children even though the fallback is being rendered, but not sure

bigmistqke•2mo ago

do you know how the compiled output looks of that piece of code?

andiOP•2mo ago

no, it's a pretty big app and the example I posted just now was actually happening across many files and components if I have time i'll try to dig deeper into the built code, but as I was debugging from the stack trace in the compiled output, I didn't see anything weird going on

bigmistqke•2mo ago

what a nasty bug!

andiOP•2mo ago

haha yeah, i think it's a better use of time if I try to reproduce it with a minimal example which I'll try to do for my own sanity as well when i have time

Gaming

Programming

TypeError: Cannot read properties of undefined (reading 'when')

Did you find this page helpful?