Typescript 5.5 and maximum length serialize

[mikecann]

We have been using type-route for some time now and love it.

We have however just upgraded our project to typescript v5.5 and started getting these errors:

libs/client-shared/src/app/routes.ts:168:31 - error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

168 export const { RouteProvider, useRoute, routes, session } = router;
                                  ~~~~~~~~

libs/client-shared/src/app/routes.ts:168:49 - error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

168 export const { RouteProvider, useRoute, routes, session } = router;

This happens when attempting to destructure the router.

Any idea?

[mikecann]

If it helps here is the entire routes definition:

import { createRouter, defineRoute, param, createGroup, Route } from "type-route";

const newUserRoot = defineRoute(
  {
    redirectUrl: param.query.optional.string,
  },
  (p) => `/new-user`,
);
const researchRoot = defineRoute({}, (p) => `/research`);
const researchTreeRoot = researchRoot.extend(
  { treeId: param.path.string, highlightNodeId: param.query.optional.string },
  (p) => `/tree/${p.treeId}`,
);
const battlesRoot = defineRoute(
  {
    isNewBattleOpen: param.query.optional.boolean,
  },
  (p) => `/battles`,
);
const friendsRoot = defineRoute(
  { isCreateInviteOpen: param.query.optional.boolean },
  (p) => `/friends`,
);
const proposalRoot = defineRoute(
  { proposalId: param.path.string },
  (p) => `/proposal/${p.proposalId}`,
);
const settingsRoot = defineRoute(`/settings`);
const debugSettingsRoot = settingsRoot.extend(`/debug`);
const joinFriendRoot = defineRoute(
  { friendUserId: param.path.string },
  (p) => `/join-friend/${p.friendUserId}`,
);
const homeRoot = defineRoute({}, (p) => `/home`);
const discordRoot = defineRoute({}, (p) => `/discord`);

export const { RouteProvider, useRoute, routes, session } = createRouter({
  root: defineRoute("/"),

  tv: defineRoute("/tv"),
  battle: defineRoute({ battleId: param.path.string }, (p) => `/battle/${p.battleId}`),
  battleReplay: defineRoute(
    { battleId: param.path.string, asPlayerId: param.query.optional.string },
    (p) => `/battle/${p.battleId}/replay`,
  ),
  battleSpectate: defineRoute(
    { battleId: param.path.string },
    (p) => `/battle/${p.battleId}/spectate`,
  ),

  stripeRedirect: defineRoute(
    { checkoutSessionId: param.path.string },
    (p) => `/stripe-redirect/checkout/${p.checkoutSessionId}`,
  ),
  close: defineRoute("/close"),
  existingUserFound: defineRoute(
    { nonce: param.query.string, email: param.query.string, userId: param.query.string },
    (p) => `/existing-user-found`,
  ),

  newUserRoot,
  // newUserTerms: newUserRoot.extend(`/terms`),
  newUserWelcome: newUserRoot.extend(`/welcome`),
  newUserChooseNewTabMode: newUserRoot.extend(`/choose-new-tab-mode`),
  newUserHowToPlay: newUserRoot.extend(`/how-to-play`),
  newUserHowToPin: newUserRoot.extend(`/how-to-pin`),
  //newUserCreateUser: newUserRoot.extend(`/create-user`),
  //newUserShipPlacementAndBattle: newUserRoot.extend(`/ship-placement-and-battle`),
  ftue: newUserRoot.extend(`/ftue`),

  // Main Menu Modal Routes
  lookingForOpponent: defineRoute("/looking-for-opponent"),
  emotes: defineRoute("/emotes"),
  profile: defineRoute(
    { userIdOrShortId: param.path.optional.string },
    (p) => `/profile/${p.userIdOrShortId}`,
  ),
  avatarDesigner: defineRoute("/avatar-designer"),
  auth: defineRoute("/auth"),
  news: defineRoute({ newsItemId: param.path.optional.string }, (p) => `/news/${p.newsItemId}`),
  battleClub: defineRoute("/battle-club"),
  todaysHighScores: defineRoute("/todays-high-scores"),
  dailyWinnersHighScores: defineRoute("/daily-winners-high-scores"),
  tournaments: defineRoute("/tournaments"),

  // Join Friend
  joinFriend: joinFriendRoot,
  joinFriendNewUser: joinFriendRoot.extend("/new-user"),
  joinFriendTutorial: joinFriendRoot.extend("/tutorial"),
  joinFriendCreateUser: joinFriendRoot.extend("/create-user"),
  joinFriendSendInvite: joinFriendRoot.extend("/send-invite"),

  // Settings
  settings: settingsRoot,
  settingsGeneral: settingsRoot.extend("/general"),
  settingsErrors: settingsRoot.extend("/errors"),
  settingsPrivacy: settingsRoot.extend("/privacy"),
  settingsDebug: debugSettingsRoot,
  settingsDebugBattles: debugSettingsRoot.extend("/battles"),
  settingsDebugUserFlags: debugSettingsRoot.extend("/user-flags"),
  settingsDebugAvatarParts: debugSettingsRoot.extend("/avatar-parts"),
  settingsDebugMedals: debugSettingsRoot.extend("/medals"),
  settingsDebugEmotes: debugSettingsRoot.extend("/emotes"),
  settingsDebugMaps: debugSettingsRoot.extend("/maps"),
  settingsDebugUserStats: debugSettingsRoot.extend("/user-stats"),
  settingsDebugErrors: debugSettingsRoot.extend("/errors"),
  settingsDebugDigitalGoods: debugSettingsRoot.extend("/digital-goods"),
  settingsDebugBlueprints: debugSettingsRoot.extend("/blueprints"),
  settingsDebugCurrency: debugSettingsRoot.extend("/currency"),
  settingsDebugMisc: debugSettingsRoot.extend("/misc"),
  settingsDebugShop: debugSettingsRoot.extend("/shop"),
  settingsDebugApollo: debugSettingsRoot.extend("/apollo"),
  settingsDebugLeague: debugSettingsRoot.extend(
    { sectionIndex: param.query.optional.number },
    () => "/league",
  ),
  settingsDebugAds: debugSettingsRoot.extend("/ads"),
  settingsDebugResearch: debugSettingsRoot.extend("/research"),
  settingsDebugChallenges: debugSettingsRoot.extend(
    { sectionIndex: param.query.optional.number },
    () => "/challenges",
  ),
  settingsDebugFeatureKeys: debugSettingsRoot.extend("/feature-keys"),
  settingsDebugShipSkins: debugSettingsRoot.extend("/ship-skins"),
  settingsDebugPayments: debugSettingsRoot.extend("/payments"),
  settingsNotifications: debugSettingsRoot.extend("/notifications"),
  settingsReviewModal: debugSettingsRoot.extend("/review-modal"),

  // Friends
  friends: friendsRoot,
  friendsMyFriends: friendsRoot.extend("/my-friends"),
  friendsInvites: friendsRoot.extend("/invites"),
  friendsPlayed: friendsRoot.extend("/played"),

  // Battles
  battles: battlesRoot,
  battlesActive: battlesRoot.extend("/active"),
  battlesOpen: battlesRoot.extend("/open"),
  battlesHistory: battlesRoot.extend("/history"),

  // Discord
  discord: discordRoot,
  discordInvite: discordRoot.extend("/invite"),
  discordSpectate: discordRoot.extend("/spectate"),

  // Proposal
  proposal: proposalRoot,

  // Main Menu Routes
  home: homeRoot,
  fleetDesigner: homeRoot.extend(`/fleets`),
  shop: defineRoute("/shop"),
  newTab: defineRoute("/newtab"),
  league: defineRoute("/league"),
  challenges: defineRoute("/challenges"),

  // Research Routes
  researchRoot,
  researchTreeRoot,
  researchTreeNode: researchTreeRoot.extend(
    { nodeId: param.path.string },
    (p) => `/node/${p.nodeId}`,
  ),
});

export type RouteNames = keyof typeof routes;

const debugSettingsRoutes = [
  routes.settingsDebug,
  routes.settingsDebugBattles,
  routes.settingsDebugUserFlags,
  routes.settingsDebugAvatarParts,
  routes.settingsDebugMedals,
  routes.settingsDebugEmotes,
  routes.settingsDebugMaps,
  routes.settingsDebugUserStats,
  routes.settingsDebugErrors,
  routes.settingsDebugDigitalGoods,
  routes.settingsDebugBlueprints,
  routes.settingsDebugCurrency,
  routes.settingsDebugMisc,
  routes.settingsDebugShop,
  routes.settingsDebugApollo,
  routes.settingsDebugLeague,
  routes.settingsDebugAds,
  routes.settingsDebugResearch,
  routes.settingsDebugChallenges,
  routes.settingsDebugFeatureKeys,
  routes.settingsDebugShipSkins,
  routes.settingsDebugPayments,
  routes.settingsNotifications,
  routes.settingsReviewModal,
];
const settingsRoutes = [
  routes.settings,
  routes.settingsGeneral,
  routes.settingsErrors,
  routes.settingsPrivacy,
  ...debugSettingsRoutes,
];
const proposalRoutes = [routes.proposal];
const friendsRoutes = [
  routes.friends,
  routes.friendsMyFriends,
  routes.friendsInvites,
  routes.friendsPlayed,
];
const battlesRoutes = [
  routes.battles,
  routes.battlesActive,
  routes.battlesOpen,
  routes.battlesHistory,
];
const battleRoutes = [routes.battle, routes.battleReplay, routes.battleSpectate];
const discordRoutes = [routes.discord, routes.discordInvite, routes.discordSpectate];
const newUserRoutes = [
  routes.newUserRoot,
  // routes.newUserTerms,
  routes.newUserWelcome,
  routes.newUserChooseNewTabMode,
  routes.newUserHowToPlay,
  routes.newUserHowToPin,
  //routes.newUserCreateUser,
  //routes.newUserShipPlacementAndBattle,
  routes.ftue,
];
const researchTreeRoutes = [routes.researchTreeRoot, routes.researchTreeNode];
const researchRoutes = [
  ...researchTreeRoutes,
  routes.researchRoot,
  routes.researchTreeRoot,
  routes.researchTreeNode,
];
const mainMenuModalRoutes = [
  routes.lookingForOpponent,
  routes.emotes,
  routes.profile,
  routes.avatarDesigner,
  routes.battles,
  routes.friends,
  routes.auth,
  routes.settings,
  routes.news,
  routes.battleClub,
  routes.todaysHighScores,
  routes.dailyWinnersHighScores,
  routes.tournaments,
  ...battlesRoutes,
  ...friendsRoutes,
  ...settingsRoutes,
  ...discordRoutes,
];
const mainMenuRoutes = [
  routes.home,
  routes.fleetDesigner,
  routes.shop,
  routes.newTab,
  routes.researchRoot,
  routes.researchTreeRoot,
  routes.researchTreeNode,
  routes.league,
  routes.challenges,
  ...mainMenuModalRoutes,
];
const joinFriendRoutes = [
  routes.joinFriend,
  routes.joinFriendCreateUser,
  routes.joinFriendNewUser,
  routes.joinFriendSendInvite,
  routes.joinFriendTutorial,
];

export const groups = {
  settings: createGroup(settingsRoutes),
  settingsDebug: createGroup(debugSettingsRoutes),
  friends: createGroup(friendsRoutes),
  battles: createGroup(battlesRoutes),
  battle: createGroup(battleRoutes),
  discord: createGroup(discordRoutes),
  newUser: createGroup(newUserRoutes),
  proposal: createGroup(proposalRoutes),
  researchTree: createGroup(researchTreeRoutes),
  researchRoutes: createGroup(researchRoutes),
  mainMenuModalRoutes: createGroup(mainMenuModalRoutes),
  mainMenuRoutes: createGroup(mainMenuRoutes),
  joinFriend: createGroup(joinFriendRoutes),
};

export const usePushRoute = () => (route: { push: () => unknown }) => route.push();

[mikecann]

Unfortunately we have now had to downgrade our Typescript version because of this.

[bradenhs]

Thanks for the report! Sorry for taking a bit to respond. Unfortunately, I haven't been able to reproduce with the router config you shared. Perhaps it's something to do with the tsconfig? Or something else? Mind sharing an example repo where this happens? I'm very interested in getting to the bottom of this.

[mikecann]

Yes you are quite right!

I just tried to setup an empty vite project with my above routes and it doesnt error.

I tried to narrow down what is going in our project then.

Unfortunately it as massive company project so I am unable to share it with you.

I suspect its because its a monorepo that we are explicitly emitting the types from for each package (we are NOT using "noEmit").

I tried to disable noEmit in the Vite project but it still didnt error... So shrug I dont know :(

I am thinking of moving our mono-repo away from building each package anyways and instead just using "paths" to reference each package, I just havent had the motivation to do it, now I do!

I guess we can close this issue for now then, ill re-open it if I find out any more information on it.