Update documentation for index route

[barbinbrad]

I think the documentation needs updated for an index route.

For example, this will break because app.calendar and app.calendar.index refer to the same route:

app.tsx
app.calendar.tsx
app.calendar.index.tsx

But this works as intended:

app.tsx
app.calendar.tsx
app.calendar._index.tsx

[kiliman]

Hm. I'm not seeing that.

❯ tree app/routes-issue23/
app/routes-issue23/
├── app.calendar.index.tsx
├── app.calendar.tsx
└── app.tsx

❯ npx remix routes
<Routes>
  <Route file="root.tsx">
    <Route path="app" file="routes-issue23/app.tsx">
      <Route path="calendar" file="routes-issue23/app.calendar.tsx">
        <Route index file="routes-issue23/app.calendar.index.tsx" />
      </Route>
    </Route>
  </Route>
</Routes>

[barbinbrad]

Ah, sorry. I'm sure I'm missing something obvious. Here's my tree:

❯ tree ./routes
./routes
├── _auth.callback.tsx
├── _auth.forgot-password.tsx
├── _auth.healthcheck.tsx
├── _auth.login.tsx
├── _auth.logout.tsx
├── _auth.refresh-session.tsx
├── _auth.reset-password.tsx
├── _auth.tsx
├── app.people.$personId.tsx
├── app.people.customers.tsx
├── app.people.employee-types.tsx
├── app.people.employees.tsx
├── app.people.groups.tsx
├── app.people.index.tsx
├── app.people.new.tsx
├── app.people.suppliers.tsx
├── app.people.tsx
├── app.tsx
├── index.tsx
└── resource.employee-types.tsx

0 directories, 21 files

And here's the error I get when I run remix dev (or npx remix routes):

⚡ yarn dev     
yarn run v1.22.19
$ PORT=3000 remix dev
Error: Path "app/people" defined by route "routes/app.people" conflicts with route "routes/app.people.index"
    at defineNestedRoutes (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/config/routesConvention.js:90:17)
    at Object.defineRoutes (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/config/routes.js:85:3)
    at Object.defineConventionalRoutes (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/config/routesConvention.js:114:17)
    at Object.readConfig (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/config.js:180:47)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at Object.dev (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/cli/commands.js:280:18)
    at dev (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/cli/run.js:193:3)
    at Object.run (/Users/bbarbin/Code/carbon/node_modules/@remix-run/dev/dist/cli/run.js:526:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

But when I change the file name to app.people._index.tsx everything works.

[kiliman]

Are you sure you're using flat routes?

Double-check your remix.config.js file.

• Make sure everything is ignored in routes folder
• Call flatRoutes from your routes entry

module.exports = {
  // ignore all files in routes folder to prevent
  // default remix convention from picking up routes
  ignoredRouteFiles: ['**/*'],
  routes: async defineRoutes => {
    return flatRoutes('routes', defineRoutes, {
      basePath: '/', // optional base path (defaults to /)
      paramPrefixChar: '$', // optional specify param prefix
      ignoredRouteFiles: [], // same as remix config
    })
  },
}

[barbinbrad]

Here's the remix.config.js file:

const { flatRoutes } = require("remix-flat-routes");

module.exports = {
  serverBuildTarget: "vercel",
  // When running locally in development mode, we use the built in remix
  // server. This does not understand the vercel lambda module format,
  // so we default back to the standard build output.
  server: process.env.NODE_ENV === "development" ? undefined : "./server.js",
  ignoredRouteFiles: [".*"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "api/index.js",
  // publicPath: "/build/",
  routes: async (defineRoutes) => {
    return flatRoutes("routes", defineRoutes, {
      basePath: "/", // optional base path (defaults to /)
      paramPrefixChar: "$", // optional specify param prefix
      ignoredRouteFiles: [], // same as remix config
    });
  },
  watchPaths: async () => {
    return [
      "../../packages/carbon-react/src/**/*",
      "../../packages/carbon-database/src/**/*",
      "../../packages/carbon-logger/src/**/*",
      "../../packages/carbon-utils/src/**/*",
    ];
  },
};

[kiliman]

You need to update ingoredRoutesFiles to ['**/*']. (ignore all files recursively)

Your config only ignores files starting with . in the root folder.

[barbinbrad]

Yes, that did it. Thank you.