absent-sapphire

Weird errors (only in production) with following structure

I have the following routes: - /player/$playerId/info - /player/$playerId/events - /player/$playerId/economy - /player/$playerId/ redirects beforeLoad to /player/$playerId/info so in this case /player/$playerId is a route with some default information from the player (coming from api) set on every page + navigation to the different subroutes. So basically /player/$playerId.tsx acts as a layout route with information shared on the different pages. This works just fine on local dev, but on production I get these weird errors: "Error: Invariant failed"

export const Route = createFileRoute('/_auth/_global/player/$playerId')({
  loader: async ({ params, context }) => {
    const [player, pogs] = await Promise.all([
      context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)),
      context.queryClient.ensureQueryData(
        playersOnGameServersQueryOptions({ filters: { playerId: [params.playerId] } }),
      ),
    ]);
    return { player, pogs };
  },
  component: Component,
  pendingComponent: () => <Skeleton variant="rectangular" width="100%" height="100%" />,
});


function Component() {
  const { playerId } = Route.useParams();
  const { player, pogs } = Route.useLoaderData();
  useDocumentTitle(player.name || 'Player Profile');
  const theme = useTheme();

  return (
    <Container>
      <Header>
        SHARED_DATA_HERE
      
      </Header>
      <HorizontalNav
        links={[
          {
            text: 'Info',
            to: '/player/$playerId/info',
            params: { playerId },
          },
          {
            text: 'Events',
            to: '/player/$playerId/events',
            params: { playerId },
          },

          {
            text: 'Economy',
            to: '/player/$playerId/economy',
            params: { playerId },
          },
        ]}
        variant="underline"
      />
      <ErrorBoundary>
        <Outlet />
      </ErrorBoundary>
    </Container>
  );
}

export const Route = createFileRoute('/_auth/_global/player/$playerId')({
  loader: async ({ params, context }) => {
    const [player, pogs] = await Promise.all([
      context.queryClient.ensureQueryData(playerQueryOptions(params.playerId)),
      context.queryClient.ensureQueryData(
        playersOnGameServersQueryOptions({ filters: { playerId: [params.playerId] } }),
      ),
    ]);
    return { player, pogs };
  },
  component: Component,
  pendingComponent: () => <Skeleton variant="rectangular" width="100%" height="100%" />,
});


function Component() {
  const { playerId } = Route.useParams();
  const { player, pogs } = Route.useLoaderData();
  useDocumentTitle(player.name || 'Player Profile');
  const theme = useTheme();

  return (
    <Container>
      <Header>
        SHARED_DATA_HERE
      
      </Header>
      <HorizontalNav
        links={[
          {
            text: 'Info',
            to: '/player/$playerId/info',
            params: { playerId },
          },
          {
            text: 'Events',
            to: '/player/$playerId/events',
            params: { playerId },
          },

          {
            text: 'Economy',
            to: '/player/$playerId/economy',
            params: { playerId },
          },
        ]}
        variant="underline"
      />
      <ErrorBoundary>
        <Outlet />
      </ErrorBoundary>
    </Container>
  );
}

5 Replies

multiple-amethyst•16mo ago

please try to reproduce by forking one of our examples on stackblitz

absent-sapphireOP•16mo ago

but it only happens when running the production build? Can I do that with stackblitz

multiple-amethyst•16mo ago

I'd take a github repo then 😅

foreign-sapphire•16mo ago

Any news ? Looks like I got the same problem Not the same error as I noticed, looks like mine was introduced in 1.35.6

absent-sapphireOP•16mo ago

For me it was related to the link component. I had a reusable nav, where I passed props set on <Link/> that stopped working @Maqui. Instead I now pass the entire link components as props as a temporary workaround.

Gaming

Programming

Weird errors (only in production) with following structure

Did you find this page helpful?