[Bug]: importing routes.ts into a route causes RR7 to throw error: "this is a bug with react router - please file an issue!" #12392
Comments
|
By the way, in case it's not obvious, the reason why I imported my routes.ts file into a route was because I added some route-related code into there which I used in my routes. I had to put that code into a different file to fix the issue. |
|
Can you give an example of the code you're exporting from the routes.ts file? It sounds to me like something that should be imported into routes.ts, not exported from it. That would break the circular dependency. This is what I think you're doing and how I might implement it: /// routes/config.ts
import { route } from "@react-router/dev/routes"
function generateRoute(path, metadata) {
return {
config: (options, children) => route(path, `pages/${path}.tsx`, options, children)
metadata
}
}
export const fooRoute = generateRoute('foo', { bar: 'baz' } )
export const barRoute = generateRoute('bar', { bif: 'buz' } )
// More route configs below
/// routes.ts
import type { RouteConfig } from "@react-router/dev/routes"
import { fooRoute, barRoute } from './routes/config.ts'
export default [
fooRoute.config({},
barRoute.config()
)
)
] satisfies RouteConfig;
/// other-module.ts
import { fooRoute, barRoute } from './routes/config.ts'
const metadatas = [fooRoute.metadata, barRoute.metadata] |
|
This is expected @markdalgleish we could check in the Vite plugin if |
|
@timdorr In my quest to implement type-safe type Paths = {
"/": undefined;
"/home": undefined;
"/signin": undefined;
"/signup": undefined;
"/delete": undefined;
"/user-challenge": undefined;
"/user-name": undefined;
"/user-avatar": undefined;
};
export function $path(path: keyof Paths, params?: Record<string, string>) {
const pathParts = path.split("/");
const newPathParts = pathParts.map((part) => {
if (part.startsWith(":")) {
const paramName = part.slice(1);
return params?.[paramName] ?? part;
}
return part;
});
return newPathParts.join("/");
}This is the start my new app. I am describing all routes, and exporting that so that I can import it in my routes to use the @pcattori Yes I think simply having a specific error message such as "You have a circular routes file. Try putting your extra code in a new file instead of importing routes." Also, it would be helpful if this error occurred in development. The real problem is that I didn't notice the error until I deployed to production and it crashed my app, leaving me to debug in production while the app was down. Getting an explanatory error in development as soon as I tried to put my routes.ts file in a route would have saved my app from dying. |
What version of React Router are you using?
7
Steps to Reproduce
import your routes.ts file into a route. this circularity seems to cause an issue with RR7. it throws an error in production (but not in dev - so it's a build issue?). i use flat routes currently, maybe that has something to do with it.
Expected Behavior
you should be able to include routes.ts in a route. or, if not, it should give you an intelligent warning or error.
Actual Behavior
this error is thrown:
The following error is a bug in React Router; please open an issue! https://github.com/remix-run/react-router/issues/new/choose
detailed server log:
The text was updated successfully, but these errors were encountered: