Data loaders inside nested layouts with params causes undefined data error when existing page in prod and with HRM.

[minht11]

For a while I noticed errors in production environment, only on pages which had dynamic page params. Not all of the users had the errors and it was very hard to reliably reproduce it, likely timing related. Except the same error could be observed under specific circumstances with HMR.

Basic loader fails instantly on the same page or on the next navigation.

Screen.Recording.2025-01-13.at.00.01.51.mov

Colada loader fails on next navigation. Feels like previous page data is being cleared too early, while component is still mounted.

Screen.Recording.2025-01-13.at.00.04.12.mov

Reproduction

[posva]

Thanks for the repro. How do you know this is the same issue in prod? Any way to reliably reproduce it? I don't think they are related.

[minht11]

I am getting issues on Sentry Cannot read properties of undefined ... on multiple routes, where loader value is accessed.
Not all of them use dynamic params, but all of them have nested layouts.

When making a reproduction, specific requirement have had to be met for error to occur, like loader inside component, nested layout and so on.

I've seen error myself, but only very rarely and by accident. This is how I narrowed issue with HRM, but was unable to reproduce it consistently without it.

[posva]

Thanks for the feedback. I will research it a bit but I think both issues are unrelated so fixing this might not fix the actual prod issue

[ERPedersen]

I am experiencing the same issue. Only happens on our prod environment, and seems timing related.

@minht11 did you find any way to circumvent this?

[minht11]

No not yet. Didn't have a lot of time to investigate further.

[ERPedersen]

I managed to find a fix for my own case.

The issue was happening to me, because I had one loader that was dependent on three other loaders.

const a = await useLoaderA()
const b = await useLoaderB()
const c = await useLoaderC()

Wrapping their calls in a Promise.all fixed the issue.

const [a, b, c] = await Promise.all([
  useLoaderA(),
  useLoaderB(),
  useLoaderC(),
])

Not sure exactly why.

[minht11]

Were you using them like this?

defineLoader(() => {
const [a, b, c] = await Promise.all([
  useLoaderA(),
  useLoaderB(),
  useLoaderC(),
])
})

In my own codebase I don't seem to have nested loaders.

[posva]

@ERPedersen can you share the code of the loaders? This could be key to reproduce the issue