evident-indigo

Tanstack routeTree generation multi-layout issues

For my react app's build process, i need to use tanstack router cli's route generation before building. Big problem is that I'm running into conflicting layout.tsx. What really confuses me is that it generates the routeTree just fine during dev, but once I try to use the CLI it flips out.

Error: Conflicting configuration paths were found for the following routes: "/", "/", "/", "/events/$eventId/dashboard/", "/events/$eventId/dashboard/", ...
Please ensure each Route has a unique full path.
Conflicting files:
- src/routes/index.tsx
- src/routes/(protected)/_layout.tsx
- src/routes/(protected)/(user)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/index.tsx
- src/routes/(protected)/events/$eventId/dashboard/(staff)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/(attendee)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/(applicant)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/(admin)/_layout.tsx

Error: Conflicting configuration paths were found for the following routes: "/", "/", "/", "/events/$eventId/dashboard/", "/events/$eventId/dashboard/", ...
Please ensure each Route has a unique full path.
Conflicting files:
- src/routes/index.tsx
- src/routes/(protected)/_layout.tsx
- src/routes/(protected)/(user)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/index.tsx
- src/routes/(protected)/events/$eventId/dashboard/(staff)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/(attendee)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/(applicant)/_layout.tsx
- src/routes/(protected)/events/$eventId/dashboard/(admin)/_layout.tsx

For some context, the dashboard layout.tsx is the UI wrapper (app shell) while each (admin), (attendee), etc is more so an auth guard. It seems like (protected)/layout.tsx also conflicts with (protected)/(user)/_layout.tsx as well. (protected) handles auth guard, (user) handles app shell, again. Most of these pathless folders are for dev organization. Anyone have any solutions? I was thinking possibly deleting the (protected) layout and just moving the authguard inside of (user). And for the (admin) and dashboard conflict, maybe just have a dedicated auth guard for each file inside, although that is a LOT of copy pasting and isn't very DRY...

14 Replies

useful-bronze•14h ago

yes you have conflicts interesting that it does not error in the dev server are you using the vite plugin?

evident-indigoOP•14h ago

Yes btw if you need any of my files or anything just lmk and I can ctrlc+v yeah i was thinking of having a really really hacky work around in my Dockerfile that run pnpm dev to generate the routeTree, then pass that into the build step LOL but obvi not very pragmatic

/// <reference types="vitest/config" />
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import tanstackRouter from "@tanstack/router-plugin/vite";
import tailwindcss from "@tailwindcss/vite";
import path from "path";
import Icons from "unplugin-icons/vite";

// https://vitejs.dev/config/
export default ({ mode }: { mode: string }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    envPrefix: "VITE",
    plugins: [
      tanstackRouter({
        target: "react",
        autoCodeSplitting: true,
        routeToken: "layout",
      }),
      react(),
      tailwindcss(),
      Icons({
        compiler: "jsx",
        jsx: "react",
      }),
    ],
    test: {
      environment: "jsdom",
      setupFiles: ["./src/setupTests.ts"],
      globals: true,
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
    esbuild: {
      drop: mode === "production" ? ["console", "debugger"] : [],
    },
    server: {
      allowedHosts: process.env.VITE_ALLOWED_HOSTS
        ? JSON.parse(process.env.VITE_ALLOWED_HOSTS ?? "")
        : "",
    },
  });
};

/// <reference types="vitest/config" />
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import tanstackRouter from "@tanstack/router-plugin/vite";
import tailwindcss from "@tailwindcss/vite";
import path from "path";
import Icons from "unplugin-icons/vite";

// https://vitejs.dev/config/
export default ({ mode }: { mode: string }) => {
  process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };

  return defineConfig({
    envPrefix: "VITE",
    plugins: [
      tanstackRouter({
        target: "react",
        autoCodeSplitting: true,
        routeToken: "layout",
      }),
      react(),
      tailwindcss(),
      Icons({
        compiler: "jsx",
        jsx: "react",
      }),
    ],
    test: {
      environment: "jsdom",
      setupFiles: ["./src/setupTests.ts"],
      globals: true,
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
    },
    esbuild: {
      drop: mode === "production" ? ["console", "debugger"] : [],
    },
    server: {
      allowedHosts: process.env.VITE_ALLOWED_HOSTS
        ? JSON.parse(process.env.VITE_ALLOWED_HOSTS ?? "")
        : "",
    },
  });
};

useful-bronze•14h ago

do you have _layout.tsx or layout.tsx ?

evident-indigoOP•14h ago

.
├── index.tsx
├── (protected)
│   ├── admin
│   │   ├── **layout.tsx**
│   ├── events
│   │   └── $eventId
│   │       ├── application.tsx
│   │       ├── dashboard
│   │       │   ├── (admin)
│   │       │   │   ├── **_layout.tsx**
│   │       │   ├── (applicant)
│   │       │   │   ├── **_layout.tsx**
│   │       │   ├── (attendee)
│   │       │   │   ├── **_layout.tsx**
│   │       │   ├── index.tsx
│   │       │   ├── **_layout.tsx**
│   │       │   └── (staff)
│   │       │       ├── **_layout.tsx**
│   │       ├── feedback
│   │       ├── index.tsx
│   ├── **_layout.tsx**
│   ├── settings.tsx
│   └── (user)
│       ├── **_layout.tsx**
│       └── resources
│           └── sponsors.tsx
├── __root.tsx
└── terms.tsx

.
├── index.tsx
├── (protected)
│   ├── admin
│   │   ├── **layout.tsx**
│   ├── events
│   │   └── $eventId
│   │       ├── application.tsx
│   │       ├── dashboard
│   │       │   ├── (admin)
│   │       │   │   ├── **_layout.tsx**
│   │       │   ├── (applicant)
│   │       │   │   ├── **_layout.tsx**
│   │       │   ├── (attendee)
│   │       │   │   ├── **_layout.tsx**
│   │       │   ├── index.tsx
│   │       │   ├── **_layout.tsx**
│   │       │   └── (staff)
│   │       │       ├── **_layout.tsx**
│   │       ├── feedback
│   │       ├── index.tsx
│   ├── **_layout.tsx**
│   ├── settings.tsx
│   └── (user)
│       ├── **_layout.tsx**
│       └── resources
│           └── sponsors.tsx
├── __root.tsx
└── terms.tsx

here is a trimmed version of our routes/ folder layouts are highlighted with **

useful-bronze•14h ago

you do have this though routeToken: "layout", so why are your files called _layout.tsx ?

evident-indigoOP•14h ago

I gotcha, that was actually a recent last ditch effort Here's a more relevant error logs

Error: Conflicting configuration paths were found for the following routes: "/layout", "/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout".
Please ensure each Route has a unique full path.
Conflicting files: 
 /src/routes/(protected)/layout.tsx
 /src/routes/(protected)/(user)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(staff)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(attendee)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(applicant)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(admin)/layout.tsx

Error: Conflicting configuration paths were found for the following routes: "/layout", "/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout", "/events/$eventId/dashboard/layout".
Please ensure each Route has a unique full path.
Conflicting files: 
 /src/routes/(protected)/layout.tsx
 /src/routes/(protected)/(user)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(staff)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(attendee)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(applicant)/layout.tsx
 /src/routes/(protected)/events/$eventId/dashboard/(admin)/layout.tsx

Its def conflicting because the layouts are resolving themselves without the pathless folders, so dashboard for example has like 5 conflicting layout.tsxs it just kind of befuddles me that it works and generates fine in dev though...

useful-bronze•14h ago

if you can provide a complete minimal example project, a github issue would be helpful

evident-indigoOP•14h ago

Thanks, will do, for now I think I'll just move the auth guards into each file separately and move (user) into (protected) and merge the two layouts Sorry to reply to you again, but I think I've sort of identified an issue. When I generate with dev the route path for a layout.tsx looks like this

export const Route = createFileRoute(
  "/(protected)/events/$eventId/dashboard",
)({
  component: RouteComponent,
});

export const Route = createFileRoute(
  "/(protected)/events/$eventId/dashboard",
)({
  component: RouteComponent,
});

But when I generate with tsr generate (CLI) it looks like this...

export const Route = createFileRoute(
  "/(protected)/events/$eventId/dashboard/layout",
)({
  component: RouteComponent,
});

export const Route = createFileRoute(
  "/(protected)/events/$eventId/dashboard/layout",
)({
  component: RouteComponent,
});

It seems like it adds the layout/ into the pathname... Maybe it doesnt read my vite config and see my layout token as layout? is there like a flag to pass into the CLI to specify a vite config?

useful-bronze•14h ago

cli does not read vite.config yes it only reads tsr.config.json

evident-indigoOP•14h ago

Hmmm, i see, so I'll just need to create a tsr config that matches.

useful-bronze•14h ago

why use the cli though? "vite build" also runs the generator

evident-indigoOP•14h ago

wow this is such a noob moment from me

    "build": "tsc -b && vite build",

    "build": "tsc -b && vite build",

For some reason we r running tsc b4 totally redundant

useful-bronze•14h ago

tsc? shouldnt matter here i mean i would still run typechecking after building as the generated file needs to be present for typechecks to work

evident-indigoOP•14h ago

yeah I just need to switch the order actually because tsc is failing due to the routeTree not existing yet, it needs to be vite build + tsx tsc* I see I see, thanks for the help, it seems to build locally now as well.

Gaming

Programming

Tanstack routeTree generation multi-layout issues

Did you find this page helpful?