Issue with react-router typegen and remix-flat-routes in v7 Project

[webbushka]

Hi everyone,

I'm transitioning from using Remix v2 to React Router v7 for a new project. I've bootstrapped the project using React Router v7 and am exploring ways to manage routing effectively. I decided to use remix-flat-routes because of its robust and flexible support for deeply nested route files, which I found essential in my previous Remix projects.

Here's where things stand:

• Using remix-flat-routes with the RouterProvider adapter works perfectly for managing the routes.
• However, when I run the react-router typegen command, the generated types each import a ../{filename}.js file.
  When I run a type check this reference fails with an error saying it cannot find that file.

Interestingly, when I switch to using fs-routes instead of remix-flat-routes, the types work as intended without any issues.

That said, I really need the deep file nesting capabilities that remix-flat-routes provides and would like to make this work while still benefiting from react-router typegen.

What I’ve Tried

• Double-checked my remix-flat-routes configuration to ensure all paths and settings align with my project structure.
• Reviewed the generated type file to understand the .js import but couldn't resolve why it fails.
• Experimented with switching to fs-routes as a comparison, which confirmed that the issue lies specifically with using remix-flat-routes.

Question

Is there a configuration option or a workaround that can make react-router typegen generate compatible types when using remix-flat-routes? I assume I am doing something wrong and I'm really hoping someone can point me at what it is.

Any pointers or suggestions would be greatly appreciated!

Here's my routes.ts config for reference:

import { type RouteConfig } from '@react-router/dev/routes'
import { remixRoutesOptionAdapter } from '@react-router/remix-routes-option-adapter'
import { flatRoutes } from 'remix-flat-routes'

export default remixRoutesOptionAdapter((defineRoutes) => {
	return flatRoutes('routes', defineRoutes, {
		ignoredRouteFiles: [
			'.*',
			'**/*.css',
			'**/*.test.{js,jsx,ts,tsx}',
			'**/__*.*',
			// This is for server-side utilities you want to colocate
			// next to your routes without making an additional
			// directory. If you need a route that includes "server" or
			// "client" in the filename, use the escape brackets like:
			// my-route.[server].tsx
			'**/*.server.*',
			'**/*.client.*',
		],
	})
}) satisfies RouteConfig

node: 22.12.0
react-router: 7.1.1
typescript: 5.7.2

Error I'm seeing is (same for each generated route):

.react-router/types/app/+types/root.ts:8:29 - error TS2307: Cannot find module '../root.js' or its corresponding type declarations.

8 type Module = typeof import("../root.js")

[myeljoud]

I'm having the same problem after migrating from Remix v2 to RR7, I noticed remixRoutesOptionAdapter returns a Promise does that have something to do with the typegen not working?