Nested Routes Not Recognized in Remix 2.16.4 with Vite

[mkd0r]

Reproduction

Hello Remix team,

I’m using Remix 2.16.4 and noticed that nested routes are not being automatically recognized. My app/routes structure is as follows:

app/
├── root.tsx
├── routes/
│ ├── _index.tsx
│ ├── create.tsx
│ ├── message.tsx
│ ├── register.tsx
│ ├── settings/
│ │ ├── index.tsx // /settings works
│ │ └── profile/
│ │ └── index.tsx // /settings/profile returns 404

Running npx remix routes does not show /settings/profile:

Visiting http://localhost:5173/settings/profile in the browser results in a 404

Error: No route matches URL "/settings/profile" at getInternalRouterError (.../node_modules/@remix-run/router/router.ts:5550:5)

What I Tried:

Deleted node_modules, .cache, and build, then ran yarn install and yarn dev—issue persists.
Flat route (settings.profile.tsx) works, but nested (settings/profile/index.tsx) is not recognized.
Similar issue reported in #10460, but mine involves nested routes.

Environment:

Remix: @remix-run/dev@2.16.4
Node: [add your Node version, e.g., 20.11.0]
OS: macOS [add your version, e.g., 14.3]
Package Manager: Yarn

Manually defining routes in remix.config.js works:

routes: async defineRoutes => { return defineRoutes(route => { route("/settings/profile", "routes/settings/profile/index.tsx"); }); }

Request:

Could you check why nested routes aren’t being detected and if this is a Vite scanning issue? Thanks!

System Info

System Version: macOS 14.6.1 (23G93)
Kernel Version: Darwin 23.6.0

Node version: v20.16.0

Used Package Manager

npm

Expected Behavior

Expected Behavior:

Based on Remix’s file-based routing system, I expect app/routes/settings/profile/index.tsx to be automatically recognized as the /settings/profile route and appear in the npx remix routes output. When visiting http://localhost:5173/settings/profile in the browser, it should render the content of index.tsx (e.g.,

PROFILTE PAGE

) instead of returning a 404 error.

Actual Behavior

Remix does not recognize app/routes/settings/profile/index.tsx as a route. It is missing from the npx remix routes output, and visiting http://localhost:5173/settings/profile in the browser results in a 404 error with the message: Error: No route matches URL "/settings/profile". However, flat routes like settings.profile.tsx work as expected.

[princetomar27]

##: Key Checks

1. Check remix.config.js for appDirectory

If you've customized the remix.config.js, make sure the appDirectory is correctly pointing to "app".

// remix.config.js
module.exports = {
  appDirectory: "app",
  // other config
};

If appDirectory is misconfigured (e.g., pointing to the wrong folder), Remix might not scan the correct path.

---

2. Check for Typo or Hidden File Extension

Double-check that the file is named correctly:

app/routes/settings/profile/index.tsx :

Not:

app/routes/settings/profile/index.tsx.txt :x:
app/routes/settings/profile/index.jsx :x:

This is surprisingly common due to editors adding .txt behind the scenes.

---

3. Check Folder Casing

On macOS, settings/profile/index.tsx and Settings/Profile/index.tsx are technically different, but Remix uses the actual file system path, and this could behave differently in builds vs. dev.

Check that your import paths (if any) and folders are all lowercase and consistent.

---

4. Vite Globbing Issue (Most Likely Cause)

You mentioned you're using Vite (@remix-run/dev@2.16.4 with vite). This issue sounds like a Vite glob scanning problem—Vite uses glob patterns under the hood to detect routes and files, and sometimes it doesn't pick up deep nested folders properly when certain files are missing or ignored.

Workaround / Fix:

Update to the latest @remix-run/dev and Vite plugin packages:

yarn upgrade @remix-run/dev @remix-run/vite

Then, make sure your vite.config.ts includes the Remix plugin correctly:

// vite.config.ts
import { defineConfig } from 'vite';
import remix from '@remix-run/vite';

export default defineConfig({
  plugins: [remix()],
});

Also make sure you’re not ignoring files in .gitignore or .npmignore that might impact how files are picked up in the build.

---

5. Double-check route visibility with npx remix routes

After cleaning the build again:

rm -rf .cache build node_modules
yarn install
npx remix routes

Check if /settings/profile appears.

---

6. Fallback Solution: Use Flat Routes (If Urgent)

Until it’s resolved, using flat routes like settings.profile.tsx is a temporary workaround. But you shouldn’t have to.

[github-actions]

Thank you for opening this issue, and our apologies we haven't gotten around to it yet!

With the release of React Router v7 we are sun-setting continued development/maintenance on Remix v2. If you have not already upgraded to React Router v7, we recommend you do so. We've tried to make the upgrade process as smooth as possible with our Future Flags. We are now in the process of cleaning up outdated issues and pull requests to improve the overall hygiene of our repositories.

We plan to continue to address 2 types of issues in Remix v2:

• Bugs that pose security concerns
• Bugs that prevent upgrading to React Router v7

If you believe this issue meets one of those criteria, please respond or create a new issue.

For all other issues, ongoing maintenance will be happening in React Router v7, so:

• If this is a bug, please reopen this issue in that repo with a new minimal reproduction against v7
• If this is a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make our framework even better!