Solid useLoaderData accessor sometimes returns undefined

[charlie-hadden]

Which project does this relate to?

Router

Describe the bug

Given a useLoaderData call like this inside a child route (/app/) it is sometimes possible for loaderData() to return undefined:

const loaderData = useLoaderData({
  from: '/app',
});

The requirements for this to happen seem to be quite specific. As far as I can tell, it seems that spa: { enabled: true }. I have also not been able to remove TanStack DB from the reproduction. In order for the issue to occur it seems that the loaderData() and the result of a live query must be used in the same expression. For example, this crashes (with Cannot read properties of undefined on the loaderData().length):

<pre>combined: {`${loaderData().length}:${rows().length}`}</pre>

But this works without issue:

<pre>loaderData: {loaderData().length}</pre>
<pre>rows: {rows().length}</pre>

It also seems like a live query must be used in both the parent and child routes. I'm actually not 100% sure if the issue is with router, start, db, or my code, but I was advised on discord to file it here.

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-ruvpbctt?file=src%2Froutes%2Fapp%2Findex.tsx

Steps to Reproduce the Bug or Issue

1. Load up the stackblitz demo
2. Click "Open /app"
3. You should see the TypeError from the loaderData().length
4. Click the 'Retry' button and it should render correctly.

You may need to attempt this several times (reloading the sandbox preview rather than the full sandbox). In my actual application I usually only run into this problem on hard reloads, and whilst shrinking it down for the reproduction it was a little intermittent suggesting possibly a race condition. This reproduction appears to throw the error for me consistently though.

Expected behavior

loaderData in this example is typed as Accessor<string>, and so I would expect it to never return undefined, and instead render the same was as when 'Retry' is clicked.

Screenshots or Videos

No response

Platform

• Router / Start Version: 1.163.2
• DB Version: 0.2.9
• OS: macOS
• Browser: Chrome
• Browser Version: 145.0.7632.117
• Bundler: vite
• Bundler Version: 7.3.1

Additional context

No response

[charlie-hadden]

I've continued to try and reproduce this without TanStack DB or TanStack Start, and I think I have finally gotten somewhere with that. Updated reproduction is here: https://stackblitz.com/edit/vitejs-vite-6k86ggta?file=src%2Froutes%2F%24slug%2Ftest.tsx

This one does trigger in a slightly different way. In this case, we use:

  const data = useLoaderData({
    from: '/$slug',
    select: (data) => {
      if (!data) {
        console.log('data', data);
        throw new Error('Data went undefined');
      }

      return data;
    },
  });

data is typed as string, but it sometimes comes through as undefined. Because it presents in a slightly different way I'm not 100% sure it's the same issue. With my admittedly limited knowledge of Router's internals, I believe it is caused by the same useMatch behaviour though.

To reproduce the error you should be able to open the stack blitz, open the browser console, and click 'Navigate'. It seems like quite a reliable reproduction. For it to be reliable, the loader waits for longer than pendingMs, and a pendingComponent is set, though it does appear that the pendingComponent at least is not a requirement.