Start: Page beforeLoad causes route.tsx context to become undefined

[daveycodez]

Which project does this relate to?

Start

Describe the bug

If you have beforeLoad on a page with an asynchronous import, it will cause the route.tsx's context to become undefined briefly. This causes issues with use-intl's <IntlProvider> due to messages becoming undefined.

Your Example Website or App

https://github.com/daveycodez/start-issue-repro

Steps to Reproduce the Bug or Issue

1. Go to http://localhost/en
2. Change the value for hello_world in messages/en.json
3. Notice how messages becomes undefined in the logs

Expected behavior

messages should never become undefined since it is always imported in the route's beforeLoad

Screenshots or Videos

No response

Platform

• Router / Start Version: [e.g. 1.121.0]
• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Browser Version: [e.g. 91.1]
• Bundler: [e.g. vite]
• Bundler Version: [e.g. 7.0.0]

Additional context

No response

[leonardo2204]

I'm facing the same problem for a long time. I have to add ?. to non-null properties so they don't break

[sharonyogev]

I think it's related to this issue: https://github.com/TanStack/router/issues/5130, maybe even exactly the same bug of getting undefined context

[schiller-manuel]

i cannot reproduce this anymore. can you please check with latest start/router version?

[leonardo2204]

I'm on 1.141.1 and I'm still seeing the same issue. My code:

const [locationData, massageTypes] = await Promise.allSettled([
        fetchLocationBySlug({ data: params.city }),
        fetchByLocation({
          data: { citySlug: params.city, gender: gender },
        }),
      ]);

      if (!(locationData.status === "fulfilled" && locationData.value.city)) {
        throw notFound();
      }

      return {
        city: locationData.value.city,
        massageTypes:
          massageTypes.status === "fulfilled" ? massageTypes.value : [],
      };

And the component:

const { gender } = Route.useSearch();
  const { city } = Route.useParams();
  const { city: fetchedCity, massageTypes } = Route.useRouteContext();

  // Send Sentry exception if fetchedCity is null/undefined (shouldn't happen)
  if (!fetchedCity?.name) {
    Sentry.captureException(new Error("fetchedCity is null or undefined"), {
      tags: { route: "massagistas-localizacao-city" },
      extra: { cityParam: city, gender },
    });
  }

[schiller-manuel]

@leonardo2204 can you please provide a complete reproducer project?

[leonardo2204]

Yeah, I'll try to come up with something similar, since it rarely happens