Fix typegen support for routes outside appDirectory

[alex-pex]

Description :

Adds support for generating types for route files that are referenced outside of appDirectory, as long as they remain within the project root.

Problem

Previously, type generation was strictly limited to files within appDirectory. The isInAppDirectory check in generate.ts would filter out any route files that were not direct children of appDirectory, even if they were within the project root.

This limitation was unnecessarily restrictive for projects that organize their code with route configuration in one directory and route modules in sibling directories. For example:

app/
  ├── router/          (appDirectory)
  │   ├── routes.ts
  │   └── root.tsx
  └── pages/           (route modules here)
      └── product.tsx

// app/router/routes.ts
export default [
    route("products/:id", "../pages/product.tsx")
] satisfies RouteConfig;

Typegen would skip generating types for route modules outside of app/router/ path, breaking type safety. The generated types will be:

.react-router/types/
  └── app/
      ├── router/
          └── +types/
              └── root.ts

Solution

I modified generate.ts to check if route files are within the project root instead of just within appDirectory:

- function isInAppDirectory(ctx: Context, routeFile: string): boolean {
+ function isInRootDirectory(ctx: Context, routeFile: string): boolean {
    const path = Path.resolve(ctx.config.appDirectory, routeFile);
-   return path.startsWith(ctx.config.appDirectory);
+   return path.startsWith(ctx.rootDirectory);
  }

The generated types will be:

.react-router/types/
  └── app/
      ├── router/
          └── +types/
              └── root.ts  
      └── pages/           (previously missing)
          └── +types/
              └── product.ts

Tests

Test setup:

• Config: appDirectory: "app/router"
• Routes defined in: app/router/routes.ts
• Route module located in: app/pages/product.tsx (outside appDirectory)

** A new test has been added ** in typegen-test.ts, named "routes outside app dir". All existing tests continue to pass, confirming no breaking changes.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5f0df45

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@react-router/dev	Patch
@react-router/fs-routes	Patch
@react-router/remix-routes-option-adapter	Patch
create-react-router	Patch
react-router	Patch
react-router-dom	Patch
@react-router/architect	Patch
@react-router/cloudflare	Patch
@react-router/express	Patch
@react-router/node	Patch
@react-router/serve	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot]

Hi @alex-pex,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[alex-pex]

3 workflows awaiting approval — This workflow requires approval from a maintainer.

Can someone allow CI to be run against my PR?

[fernandojbf]

I’ve created a PR related to this: #14439

My fix does not addresses the same issue you’re trying to solve, but I believe the same logic should be applied here as well.

If, for some reason, the route type is not generated (for example, when it’s outside the root folder), we should provide a fallback for the module type.