Why are my routes 404ing when I remove remix-flat-routes

[zwhitchcox]

So, I've been using flat routes since the beginning, and I thought v2 was supposed to be compatible. Here is my directory structure:

It looks like the _index/route.tsx is not correct...is that not right? /tags is 404ing

routes
├── _account+
│   ├── forgot-password.tsx
│   ├── join.tsx
│   ├── login.tsx
│   ├── logout.tsx
│   ├── pending.tsx
│   ├── reset-password.tsx
│   └── verify-email.tsx
├── _index.tsx
├── calls
│   ├── $callId
│   │   ├── _index.tsx
│   │   ├── components
│   │   │   ├── AudioPlayer.tsx
│   │   │   ├── CallAnalysis.tsx
│   │   │   ├── CallInfo.tsx
│   │   │   ├── RerunButton.tsx
│   │   │   ├── Tags.tsx
│   │   │   ├── TimeTracker.tsx
│   │   │   └── Transcription.tsx
│   │   └── types.ts
│   ├── _index
│   │   └── route.tsx
│   └── recordings
│       └── $callId
│           └── route.ts
├── dashboard.($agentId)
│   ├── components
│   │   ├── Calls.tsx
│   │   ├── CircleChart.tsx
│   │   ├── GradientBar.tsx
│   │   ├── KPI.tsx
│   │   ├── PerformanceOverTime.tsx
│   │   ├── Performers.tsx
│   │   ├── RefreshButton.tsx
│   │   ├── TimeRangeChanger.tsx
│   │   └── TypeCounts.tsx
│   └── route.tsx
├── db.tsx
├── healthcheck.tsx
├── hvac
│   ├── prices
│   │   └── route.tsx
│   └── quotes
│       ├── $quoteId
│       │   ├── _index
│       │   │   └── route.tsx
│       │   └── edit
│       │       └── route.tsx
│       ├── TODO.md
│       ├── _index
│       │   └── route.tsx
│       ├── components
│       │   ├── Custom.tsx
│       │   ├── ProfitMargin.tsx
│       │   ├── Quote.tsx
│       │   └── SystemSummary.tsx
│       ├── new
│       │   └── route.tsx
│       ├── types.tsx
│       └── util.ts
├── info
│   └── route.tsx
├── powerbi
│   └── _index.tsx
├── settings
│   └── _index.tsx
├── super
│   ├── _index.tsx
│   └── data-table.tsx
├── tags
│   ├── $tag
│   │   └── route.tsx
│   └── _index
│       └── route.tsx
└── tasks
    ├── ($task)
    │   ├── IconModal.tsx
    │   ├── JobsTable.tsx
    │   ├── Progress.tsx
    │   ├── Run.tsx
    │   ├── columns.tsx
    │   └── route.tsx
    ├── layout.tsx
    └── proxy.$
        └── route.tsx

29 directories, 58 files

and here is my remix config:

/**
 * @type {import('@remix-run/dev').AppConfig}
 */

const { join } = require("path");

const isProduction = process.env.NODE_ENV === "production";
const isLocal = process.env.NODE_ENV === "local";

module.exports = {
  serverDependenciesToBundle: [
    /^db.*/,
    /^auth.*/,
    "auth",
    "react-gauge-chart",
    "delaunator",
    "internmap",
    "robust-predicates",
    "react-markdown",
    "robust-segment-intersect",
    /^d3.*/,
    /^micromark.*/,
    "vfile",
    "unified",
    "remark-parse",
    "remark-rehype",
    "property-information",
    "unist-util-visit",
    "hast-util-whitespace",
    "space-separated-tokens",
    "comma-separated-tokens",
    "mdast-util-to-hast",
    "mdast-util-from-markdown",
    "bail",
    "vfile-message",
    "unist-util-visit-parents",
    "trough",
    "unist-util-is",
    "mdast-util-to-string",
    "unist-util-position",
    "unist-util-stringify-position",
    "unist-util-generated",
    "micromark-util-decode-numeric-character-reference",
    "micromark-util-sanitize-uri",
    "mdast-util-definitions",
    "micromark-util-decode-string",
    "micromark-util-normalize-identifier",
    "micromark-util-character",
    "micromark-util-encode",
    "decode-named-character-reference",
    "trim-lines",
    "character-entities",
  ],
  cacheDirectory: "./node_modules/.cache/remix",
  serverModuleFormat: "cjs",
  ignoredRouteFiles: ["**/.*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
  // prisma: {
  //   schemaPath:
  //     isProduction || isLocal
  //       ? join(__dirname, "prisma", "schema.prisma")
  //       : join(__dirname, "..", "shared", "prisma", "schema.prisma"),
  // },
  dev: {
    port: 4004,
  },
};

Can anyone explain why the localhost:3000/tags route would be 404ing (as well as the rest of the routes other than the dashboard? The index route redirects to the dashboard if they are logged in, not sure if that's relevant:

export async function loader({ request }: LoaderFunctionArgs) {
  if (await getUserId(request)) {
    return redirect("/dashboard");
  }
  return {};
}

I'm on remix version 2.1.0:

    "@remix-run/node": "^2.1.0",
    "@remix-run/react": "^2.1.0",
    "@remix-run/serve": "^2.1.0",
    "@remix-run/server-runtime": "^2.1.0",

[kiliman]

Remix v2 routing doesn't support folders for nesting, just for colocation. Hybrid routes is an extension added to remix-flat-routes. You will need to remove the interior folders and use dots.

routes
├── _account+
│   ├── forgot-password.tsx
│   ├── join.tsx
│   ├── login.tsx
│   ├── logout.tsx
│   ├── pending.tsx
│   ├── reset-password.tsx
│   └── verify-email.tsx

must be

routes
├── _account.forgot-password.tsx
├── _account.join.tsx
├── _account.login.tsx
├── _account.logout.tsx
├── _account.pending.tsx
├── _account.reset-password.tsx
└── _account.verify-email.tsx

[zwhitchcox]

Ok, thanks, that's what I figured out...but on your repo it says that the flat routes will be used in a future version of remix (with the plugin)...is that still the case? Or do I need to add a plugin and just switch to v2 routes? The nested folders makes for a much more navigable codebase.

Thank you for personally replying btw, didn't expect that!

@kiliman

[kiliman]

My package was the initial implementation of the flat routes spec. It added some extensions based on user feedback. When they released v2, they added flat routes as the default, but kept the original spec. So think of remix-flat-routes as a superset of the v2 convention.

So, if you want nested folders, you'll need my package. Even @kentcdodds is using it in his Epic Stack and Epic Web course.

[zwhitchcox]

Ok, thanks, that's what I thought. Yeah, I saw that Kent was using it which made me feel more comfortable with it. It seems like this should be the default though!

Thanks for your help!