[WIP] How to better structure Route <-> Router to avoid circular references

[Newbie012]

Describe the bug

Given the following setup:

// src/routes/a.tsx

import { Route } from "@tanstack/react-router";
import { rootRoute } from "./_root";
import { router } from "./_router";

export const aRoute = new Route({
    getParentRoute: () => rootRoute,
    component: () => <></>
    path: "a",
    beforeLoad: () => {
        console.log(router.basepath); // <--- note this line
    }
});

// src/routes/_router.tsx

import { ReactRouter } from "@tanstack/react-router";
import { aRoute } from "./a";
import { rootRoute } from "./_root";

export const routeTree = rootRoute.addChildren([aRoute]);
export const router = new ReactRouter({ routeTree });

// src/routes/_root.tsx

import { RootRoute } from "@tanstack/react-router";

export const rootRoute = RootRoute.withRouterContext()();

Each time I save the file a.tsx, I get the following error (due to an attempt of HMR):

This makes sense since they all reference each other in a circular way. In order to fix that, I need to use the router that I get inside beforeLoad instead. But the problem is that it's AnyRouter which isn't type-safe.

Your Example Website or App

https://github.com/Newbie012/tanstack-router-circular-reference

Steps to Reproduce the Bug or Issue

1. Clone https://github.com/Newbie012/tanstack-router-circular-reference
2. Run pnpm install
3. Run pnpm dev
4. Open browser, and navigate to http://localhost:5173/a
5. Attempt to modify the file src/routes/a.tsx
6. See an error (image above) in the console:

ReferenceError: Cannot access 'aRoute' before initialization
    at _router.tsx:5:49
[hmr] Failed to reload /src/routes/a.tsx. This could be due to syntax errors or importing non-existent modules. (see errors above)

Expected behavior

Should not throw that error

Screenshots or Videos

Platform

• OS: Windows (WSL2 Ubuntu)
• Browser: Chrome
• Version: Version 109.0.5414.120 (Official Build) (64-bit)

Additional context

Really cool library.

[tannerlinsley]

I am having a difficult time getting this to reproduce locally.

[Newbie012]

If it helps, I recorded my reproduction:

screen-recording.2.webm

It happens on 0.0.1-beta.70 as well. In fact, in 0.0.1-beta.70 it warns about useRouter must be used inside a <Router> component! even tho there's no useRouter in the reproduction:

[tannerlinsley]

That second error is now fixed, but I'm still looking into the first issue.

[tannerlinsley]

Please try the latest version. If it still persists, could you link me to a stackblitz example that up to date?

[XpamAmAdEuS]

issue mentioned its just circular error in vite HMR there nothing to do in router to avoid it its how vite works.

[Newbie012]

@tannerlinsley sorry it took a while for me to respond back. Here's a reproduction on stackblitz:

1. go to https://stackblitz.com/edit/github-ok3khj?file=src%2Froutes%2Fa.tsx
2. navigate to /a
3. open chrome console (or any other inspect tool)
4. open a.tsx
5. modify the file
6. see the following error:

@XpamAmAdEuS while you're right, it does impact DX, which I believe is one of the main goals of this library.

[XpamAmAdEuS]

`import { Route } from '@tanstack/react-router';
import { rootRoute } from './_root';

export const aRoute = new Route({
getParentRoute: () => rootRoute,
component: A,
path: 'a',
beforeLoad: () => {
console.log(3);
console.log('no circular xDD');
//console.log(router.basepath);
},
});

type Props = {};

export default function A({}: Props) {
return

a

;
}`

Vite HMR works if u not importing router inside route just comment ot console.log(router.basepath);, and try
What u did its import router and try to use it inside route which its a part of same router soo u make a circular dependancy and u get exactly this error,really have nothing to do with router library.
In production everything will work just fine.
Btw why u even want to access router instance inside beforeLoad: ?

[Newbie012]

I know that I'm what I'm trying to do and I understand why the error occurs. I understand that the error doesn't come from the library itself. The issue I wrote above is not specifically about this error or its cause. The reproduction I wrote above was only intended to show the flow and the abovementioned issue. I'll rephrase my intentions so everything will be clearer.

While creating a RootRoute, we can create a RootRoute.withRouterContext which, of course, creates a router with a context.

Sometimes, you may want to access the root router context (such as API, auth, etc) inside beforeLoad. As an example, take a look at the official kitchen sink example:

router/examples/react/kitchen-sink-single-file/src/main.tsx

Lines 804 to 808 in 89640dc

	beforeLoad: () => {
	if (router.options.context.auth.status === 'loggedOut') {
	throw AuthError
	}
	},

There are few solutions that may solve it:

1. allow accessing context inside beforeLoad (just like in onLoad).
2. the router property in beforeLoad arg should be typed as the root router rather than AnyRouter (assuming it's the actual root router).

[austincollinpena]

I can confirm I have this issue on 0.0.1-beta.82 and that changing my @vitejs/plugin-react to 2.2.0 solved the problem for now.

[ArnaudBarre]

Hi everyone, coming here from the opened issue on the React plugin repo.

I didn't have a chance to play with Tan stack router yet and I don't know if the example is the recommended pattern, but this pattern is really bad for React HMR. To get most out of it, a file that contains one or more component should only export React components (and the route export is not one). More info here: https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#consistent-components-exports.

I wrote this eslint rule to catch this kind of patterns (not perfect but would warn against that): https://github.com/ArnaudBarre/eslint-plugin-react-refresh

The solution is to export the page component and construct the route objects in another file (either the main router of intermediate files for big apps)

[XpamAmAdEuS]

This issue its becouse of bad early stage examples

route imports some view and then this view again imports route to ask for route .id... and thats bad pattern and its circular dependency problem

If using this any hook that need route id by entering just string and not importing route to ask for id everything works just nice
good example
const search = useSearch({ from: "/admin/customers/list" });
becouse we dont make circular import problem.

but if we use like in examples then we got problem.
const search = useSearch({ from: customersRoute.id });

its simple and easy fixable if not making any circular imports everything goes just nice with vite.

[arpadgabor]

Can still confirm the issue, but the fix is simple if you keep close attention. As @XpamAmAdEuS also mentioned, it's a circular dependency.

I created a separate file _root.tsx that declares my root and that's where I import it from all other routes, then the main routes.tsx file also imports that _root. Otherwise if you declare root inside routes.tsx and then you import the root in your route files, you get this error because it tries to access a variable that was not initialized yet.

I'm just starting out with tanstack router, wondering how imports end up when you have many nested routes, but for now this works well.