extended-salmon

weird "The above error occurred in the <MatchInner> component" error

I have a schedule route.

const scheduleSearchSchema = z.object({
  date: z
    .string()
    .regex(new RegExp("^\\d{4}-([0]\\d|1[0-2])-([0-2]\\d|3[01])$"))
    .catch(getStringDate()),
});

export const Route = createFileRoute("/dashboard/schedule-view")({
  validateSearch: scheduleSearchSchema,
  loaderDeps: ({ search: { date } }) => {
    return {
      date: date,
    };
  },
  loader: async ({ deps: { date } }) => {
    console.log(date);
    try {
      await apiUtils.worker.getSchedule.ensureData({
        date: date,
      });
    } catch (error) {
      throw notFound();
    }
  },
});

const scheduleSearchSchema = z.object({
  date: z
    .string()
    .regex(new RegExp("^\\d{4}-([0]\\d|1[0-2])-([0-2]\\d|3[01])$"))
    .catch(getStringDate()),
});

export const Route = createFileRoute("/dashboard/schedule-view")({
  validateSearch: scheduleSearchSchema,
  loaderDeps: ({ search: { date } }) => {
    return {
      date: date,
    };
  },
  loader: async ({ deps: { date } }) => {
    console.log(date);
    try {
      await apiUtils.worker.getSchedule.ensureData({
        date: date,
      });
    } catch (error) {
      throw notFound();
    }
  },
});

Now, I get the schedule the link and send it to trpc, the error happens when its not found.

41 Replies

extended-salmonOP•2y ago

function ScheduleViewPage({ children }: { children: React.ReactNode }) {
  const { date } = Route.useSearch();
  const navigate = useNavigate({ from: "/dashboard/schedule-view" });
  const location = useRouterState({ select: (s) => s.location });
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const dataPicker = (
    <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn(
            "w-[280px] justify-start text-left font-normal",
            !date && "text-muted-foreground",
          )}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="single"
          selected={new Date(date)}
          onSelect={(date) => {
            setIsCalendarOpen(false);
            void navigate({
              to: location.pathname,
              search: {
                date: getStringDate(date),
              },
            });
          }}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
  return (
    <div className="flex flex-col items-center justify-center p-2 ">
      {/* link to subpages */}
      {dataPicker}
      {children}
    </div>
  );
}

function ErrorScheduleViewComponent() {
  return (
    <ScheduleViewPage>
      <span>This date has no schedule</span>
    </ScheduleViewPage>
  );
}

function ScheduleViewComponent() {
  return (
    <ScheduleViewPage>
      <Outlet />
    </ScheduleViewPage>
  );
}

function ScheduleViewPage({ children }: { children: React.ReactNode }) {
  const { date } = Route.useSearch();
  const navigate = useNavigate({ from: "/dashboard/schedule-view" });
  const location = useRouterState({ select: (s) => s.location });
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const dataPicker = (
    <Popover open={isCalendarOpen} onOpenChange={setIsCalendarOpen}>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn(
            "w-[280px] justify-start text-left font-normal",
            !date && "text-muted-foreground",
          )}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="single"
          selected={new Date(date)}
          onSelect={(date) => {
            setIsCalendarOpen(false);
            void navigate({
              to: location.pathname,
              search: {
                date: getStringDate(date),
              },
            });
          }}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
  return (
    <div className="flex flex-col items-center justify-center p-2 ">
      {/* link to subpages */}
      {dataPicker}
      {children}
    </div>
  );
}

function ErrorScheduleViewComponent() {
  return (
    <ScheduleViewPage>
      <span>This date has no schedule</span>
    </ScheduleViewPage>
  );
}

function ScheduleViewComponent() {
  return (
    <ScheduleViewPage>
      <Outlet />
    </ScheduleViewPage>
  );
}

when I first go into the error page, it works and renders. but if I go out of focus, and come back to the page, I get the error

extended-salmonOP•2y ago

extended-salmonOP•2y ago

ok, now I also get the error when just relaoding Im pretty sure the subroutes aint really related to the error, since its only when theres a not found, and the subroutes aint rendered since there is no outlet sadly the router dev tools dont seem to help with that error too, cant really figure out what exactly went wrong

extended-salmonOP•2y ago

I noticed that the error happen when I hover the sublinks

extended-salmonOP•2y ago

 return (
    <div className="flex flex-col items-center justify-center p-2 ">
      <h3>Schedule - Worker</h3> {location.pathname}
      <nav>
        <Link
          to="/dashboard/schedule-view/tire-loading"
          from={location.pathname}
          className={cn(buttonVariants({ variant: "link" }), "text-lg")}
          search={{ date }}
        >
          Loading Tires
        </Link>
        <Link
          to="/dashboard/schedule-view/orders"
          from={location.pathname}
          className={cn(buttonVariants({ variant: "link" }), "text-lg")}
          search={{ date }}
        >
          Orders
        </Link>
      </nav>
      {dataPicker}
      {children}
    </div>
  );

 return (
    <div className="flex flex-col items-center justify-center p-2 ">
      <h3>Schedule - Worker</h3> {location.pathname}
      <nav>
        <Link
          to="/dashboard/schedule-view/tire-loading"
          from={location.pathname}
          className={cn(buttonVariants({ variant: "link" }), "text-lg")}
          search={{ date }}
        >
          Loading Tires
        </Link>
        <Link
          to="/dashboard/schedule-view/orders"
          from={location.pathname}
          className={cn(buttonVariants({ variant: "link" }), "text-lg")}
          search={{ date }}
        >
          Orders
        </Link>
      </nav>
      {dataPicker}
      {children}
    </div>
  );

I think its something with preloading probably anyone have an idea? bump, anyone can help with it?

environmental-rose•2y ago

can you reproduce this in a minimal example?

extended-salmonOP•2y ago

ill try @Manuel SchillerI managed to reproduce the error in stackblitz. Sharing it

extended-salmonOP•2y ago

https://stackblitz.com/edit/vitejs-vite-rynjvr?file=client%2Fsrc%2Froutes%2Fschedule-view%2Froute.tsx

Liran Goldman

StackBlitz

Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

extended-salmonOP•2y ago

not sure why but sometimes im transfered to the global "not found" page instead of the component one. but when I messed around I managed to get the component not found and reproduced the error that happens only in the stackblitz, not in my repo

extended-salmonOP•2y ago

and refreshed and now its the global not found again

extended-salmonOP•2y ago

that didnt happen to me in my repo. not sure whats this about. this does tho @Manuel Schiller @Tanner Linsley hey, could you check this out?

modern-teal•2y ago

I can in a while

extended-salmonOP•2y ago

Okay, thanks Tanner! Hey, would be nice if it could get checked out and hopefully fixed by tuesday, thanks 🙏 Hey, any updates? reproduction is here . @Tanner Linsley Hey Tanner sorry for pinging you again for this but could you take a look? I know you are pretty busy and I totally respect that it just becomes a bit urgent for me as the days pass

modern-teal•2y ago

I see it I’ve experienced it too with my rewrite of TanStack.com, but only when attempting to navigate or load when something is suspended. Eg during streaming . I don’t have a fix for this yes. Nor do I know how to approach it yet.

continuing-cyan•2y ago

I'm experiencing the same issue. Always after login and only for certain customers @Zion Were you able to already create an issue for it on github with the repro included? For us the issues keeps appearing too

extended-salmonOP•2y ago

Not sure I follow? There's a reproduction here In my case this error isn't really affecting the app since that part of the app is made for tablet usage and not pc, so you can't hover anyways

continuing-cyan•2y ago

Yes sure. I meant to create an issue here: https://github.com/TanStack/router/issues and also attach your stackblitz repro there too. I think it would be good since it's "more official" than here on discord

GitHub

Issues · TanStack/router

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - Issues · TanStack/router

extended-salmonOP•2y ago

Oh, sure. I need to update the reproduction and see if this still happening in the newest version (I assume it does since it happens for you) I will do it maybe later today, I'm at work right now

continuing-cyan•2y ago

sounds good. Would be nice if you could add the link to the issue here too. I'll make sure to investigate further and if I find something also add it to the github issue

extended-salmonOP•2y ago

Alright 🙏

continuing-cyan•2y ago

were you able to create a github issue?

extended-salmonOP•2y ago

AHH I'm so sorry, it totally slipped my mind. Had a busy few weeks, and today after work I'm also not home. I'll try to do it tomorrow morning, I work from home so I can do it there Okay, my plans got cancelled so I'll do it in the coming hour

extended-salmonOP•2y ago

https://stackblitz.com/edit/vitejs-vite-9iukwt?file=package.json

Liran Goldman

StackBlitz

Vitejs - Vite (forked) - StackBlitz

Next generation frontend tooling. It's fast!

extended-salmonOP•2y ago

updated the stackblitz it looks like its working now, when you click on orders/loading tires it does popup for half a second a "Error: Invariant failed: Could not find match for from: /schedule-view/tire-loading", but then shows the error componenet

extended-salmonOP•2y ago

and also the text is above the date picker?

extended-salmonOP•2y ago

@Tanner Linsley could you take a look at that reproduction and tell me if thats the expected behaviour? if its not, I'll upload a bug issue on the github

environmental-rose•2y ago

@Chris Horobin can you please check this out? this error message sounds like the one introduced by you

fair-rose•2y ago

Sure, I'll take a look You're using location.pathname for from. Currently from does not accept a pathname, only a fullName from a Route. I also think specifying from={locaton.pathname} is unnecessary as this should be the default and doesn't provide any extra type safety as its only a string @Manuel Schiller I don't know if from needs to be documented better. from asserts that a route matches the current location, this is so TS can safely narrow the types and a runtime error should be expected if from does not match the current location. pathname is usually a string and not a string literal like fullName so I don't think it provides much value when you use it in from Now I'm thinking from a TS point of view. Why do we allow any string in from if it throws an exception anyway? Shouldn't we only allow string literals (valid fullName)?

continuing-cyan•17mo ago

I had some time to look at the <MatchInner> error too. I tested with ^1.19.1 and noticed that on navigation the error only appeared for a route that used the loader:

loader: ({ context }) =>
    context.queryClient?.ensureQueryData(fetchFileDataQuery.all()),

loader: ({ context }) =>
    context.queryClient?.ensureQueryData(fetchFileDataQuery.all()),

Uploading to latest version ^1.45.4 it did not appear anymore. It might be fixed along this PR https://github.com/TanStack/router/pull/1907 ? FYI @Zion

continuing-cyan•17mo ago

Eventually, this error still seem to appear for me from time to time using v1.45.5

fair-rose•17mo ago

Hello. I'm not sure what error your getting here. Is this happening in a reproducer you've provided? Will need more information

continuing-cyan•17mo ago

unfortunately not from the reproducer. After updating the library it just happened once or twice out of roughly 30 tries. I could not say yet if it was random or because of something particular. Once I have time I'll try to get a reproduction for it What I can already say so far is that I can consistenly can reproduce the issue in our production app when: 1. Log in with an account that by default routes to /overview 2. Logout 4. Login with an account that by default routes to /file-management (that uses loader) 5. Now the <MatchInner> bug appears and nothing is shown in the <Outlet>. So it seems, that ensureQueryData throws the error. That's why nothing is rendered (https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#loader-method:~:text=If%20an%20error%20is%20thrown%20here%2C%20the%20route%27s%20loader%20will%20not%20be%20called%20and%20the%20route%20will%20not%20render). Though, I don't know why it throws an error. If I catch the promise from ensureQueryData, everything works as expected I will investigate further and see if I can get a working reproducer Ok found the source of the problem which is:

queryClient.clear();
void queryClient.invalidateQueries();

queryClient.clear();
void queryClient.invalidateQueries();

Especially queryClient.clean() which runs on the login page. It's purpose is when switching between accounts, cached queries are emptied so that newly logged in account doesn't not see the cached data of the account logged in before. I'm happy to remove this line of code but do not want to loose this functionality either. Any idea? Okay, we solved the issue by calling

queryClient.clear();
router.cleanCache();

queryClient.clear();
router.cleanCache();

` in our logout method AFTER navigating to the loginRoute. (if we did it before, it would try to make all requests again which resulted in a 401) Interestingly enough, call the same functions in our LoginRoute would not work. No idea why. If you have an explanation, i'd greatly appreciate hearing it

fair-rose•17mo ago

I would say it's likely because you're using both router cache and query caching. Are you also storing tokens in the cache? It could also be that invalidating the queries is forcing the requests to be made again as they're considered stale

continuing-cyan•17mo ago

I would say it's likely because you're using both router cache and query caching

That's quite likely yeah. At least from how I can see it, we're using both. Are there best practices to both empty cache for query and router?

function App() {
  const auth = useAuth();
  const queryClient = useQueryClient();

  return (
    <RouterProvider
      router={router}
      context={{ ...auth, queryClient }}
    />
  );
}

function App() {
  const auth = useAuth();
  const queryClient = useQueryClient();

  return (
    <RouterProvider
      router={router}
      context={{ ...auth, queryClient }}
    />
  );
}

There's a fix I found, though I cannot explain why it is fixing it and it probably also not the cleanest:

<Button
  onClick={async () => {
    logOut();
    await navigate({ to: loginRoute.fullPath });
    queryClient.clear();
    router.cleanCache();
  }}
>
  Log out
</Button>

<Button
  onClick={async () => {
    logOut();
    await navigate({ to: loginRoute.fullPath });
    queryClient.clear();
    router.cleanCache();
  }}
>
  Log out
</Button>

Maybe you can give me a hint here?

Are you also storing tokens in the cache?

I can say that I'm storing tokens in the router context, injected via a react context

sensitive-blue•14mo ago

@lukask did you solve this issue? 🙂

continuing-cyan•14mo ago

Yes. I kept it the way I described above. After that I honestly also didn’t have a look again

sensitive-blue•14mo ago

todo: disable router cache when using query client?

Gaming

Programming

weird "The above error occurred in the <MatchInner> component" error

Did you find this page helpful?