Empty context with parent / child `beforeLoad`, `loader` and `validateSearch`

[cyrilchapon]

Which project does this relate to?

Router

Describe the bug

Hello,

I'm facing a problem where I get an empty context passed down to a child route uppon validateSearch URL rewrite.

The setup looks like this

• __root.tsx
• _parent.tsx
  • beforeLoad (adds { session } to context)
  • loader (reads context.session)
• _parent/child.tsx
  • validateSearch
  • beforeLoad (reads context.session)
  • loader (reads context.session)

_parent.tsx

export const Route = createFileRoute('/_some-parent')({
  component: () => <Outlet />,
  beforeLoad: async () => {
    // Fake session fetch
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const session = 'fake-session';

    console.log('parent beforeLoad', session);

    return { session };
  },
  loader: async ({ context: { session } }) => {
    console.log('parent loader', session);
  },
});

_parent/child.tsx

const applicationSearchOptionsSchema = z.object({
  page: fallback(z.number().positive(), 1).default(1),
});

export const Route = createFileRoute('/_some-parent/some-child')({
  component: () => <div>Hello world</div>,
  validateSearch: zodValidator(applicationSearchOptionsSchema),
  beforeLoad: ({ context: { session } }) => {
    console.log('child beforeload', session);
  },
  loader: ({ context: { session } }) => {
    console.log('child loader', session);
  },
})

(NB: I'm using zodValidator and fallback syntax straight from the documentation)

When navigating to /child?page=1, everything behaves correctly :

> parent beforeLoad fake-session
> child beforeload fake-session
> parent loader fake-session
> child loader fake-session

But when hard navigating (not client side redirect) to /child, I'm getting an empty context with undefined session on loaders first; then after the "redirection" (it's not a redirect but you get my point) to ?page=1, it loads correctly :

> parent beforeLoad fake-session
> child beforeload fake-session
> parent loader undefined // <= HERE
> child loader undefined // <= HERE

> parent beforeLoad fake-session
> child beforeload fake-session
> parent loader fake-session
> child loader fake-session

What is even stranger; is on local I'm even also getting and undefined on the child beforeLoad and not on Stackblitz :

> parent beforeLoad fake-session
> child beforeload undefined // <= HERE
> parent loader undefined // <= HERE
> child loader undefined // <= HERE

> parent beforeLoad fake-session
> child beforeload fake-session
> parent loader fake-session
> child loader fake-session

Your Example Website or App

https://stackblitz.com/edit/github-advydsjg?file=src%2Froutes%2F_some-parent.tsx,src%2Froutes%2F_some-parent%2Fsome-child.tsx

Steps to Reproduce the Bug or Issue

• go reproduction
• open console inspector
• on the preview, click on "Child"
• if error doesn't pop, go back to home
• copy the url, append /some-child to it then enter

Expected behavior

I would expect either the loader not to run, or the loader getting a correct context

Screenshots or Videos

0741bfe144cf4aeb97f3156146a7b501.mp4

Platform

• OS: macOS
• Browser: Chrome
• Version: 132.0.6834.111 ARM64

Additional context

    "@tanstack/react-router": "^1.105.5",
    "@tanstack/zod-adapter": "^1.111.11",
    "zod": "^3.24.2",

[cyrilchapon]

As an addition, I was wondering if I was not misusing validateSearch + zod-adapter; so I gave a reproduction shot with valibot with exact same schema; and was able to reproduce exactly the same behavior.

This discriminate zod-adapter and my usage of it.

const applicationSearchOptionsSchema = v.object({
  page: v.optional(v.fallback(v.number(), 1), 1)
})

export const Route = createFileRoute("/_protected/_dashboard/applications")({
  // ...
  validateSearch: applicationSearchOptionsSchema,
  // ...
})

---

On the other hand, I gave a shot at backpedaling to understand where the bug started. So I remove entirely the validateSearch step; and was not able to reproduce at all.

The route loads and run the loader (only once); with correct context.

> parent beforeLoad fake-session
> child beforeload fake-session
> parent loader fake-session
> child loader fake-session

---

If that can help, my feeling on that is when a validateSearch falls into a fallback; it actually runs twice loader; but the first time without beforeLoad. I'm going to try and highlight this.

EDIT:

Back after some more tests, I think I found something interesting.

Here's my parent route beforeLoad :

export const Route = createFileRoute("/_protected")({
  beforeLoad: async () => {
    console.log('parent beforeLoad (sync)', new Date().getTime(), null)
    // await new Promise(resolve => setTimeout(resolve, 1000))
    const session = await getSession();
    console.log('parent beforeLoad (async)', new Date().getTime(), session)
    return { session };
  },
  component: ProtectedRoute,
});

And my child route loader :

export const Route = createFileRoute("/_protected/_dashboard/applications")({
  component: AppsRouteComponent,
  validateSearch: zodValidator(applicationSearchOptionsSchema),
  loader: async ({ context }) => {
    const { session } = context
    console.log('child loader', new Date().getTime(), session)
  },
});

And here's the result :

Apparently the beforeLoad is actually ran before the loader as it should, but doesn't seem awaited.

---

Notice than in my last example; the child loader is actually NOT ran a second time after the beforeLoad actually resolves (like it was in my simplified example).

Remember that I said there was a difference between stackblitz and my actual code ? I think I found why; that's because on stackblitz I was actually "awaiting" longer (setTimeout with 1000) and on my code I was just calling getSession.

Now if locally I uncomment the setTimeout :

export const Route = createFileRoute("/_protected")({
  beforeLoad: async () => {
    console.log('parent beforeLoad (sync)', new Date().getTime(), null)

    await new Promise(resolve => setTimeout(resolve, 1000))
    console.log('parent beforeLoad (async 1)', new Date().getTime(), null)

    const session = await getSession();
    console.log('parent beforeLoad (async 2)', new Date().getTime(), session)

    return { session };
  },
  component: ProtectedRoute,
});

I'm getting this result with an extra loader roundtrip...

[cyrilchapon]

I found these which might be related :

• beforeLoad does not wait for async functions to resolve #1553
• Context is undefined after redirect #1531#issuecomment-2145817491
• Context is undefined when search validation fails #1656

None of workarounds found here and there work for my case.

[jarreds]

Any luck on this? Seeing something very similar.

[cyrilchapon]

Any luck on this? Seeing something very similar.

Unfortunately no 😕