eager-peach

Impossible to have Index route working

Hi, When i use tanstack start, i try to map an index route ('/') but it is not working can someone can help me ? /app/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/"!</div>
}

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/"!</div>
}

See screenshot Available to debug this by discord (complicate to give repo sensitive data in it(

26 Replies

ratty-blush•7mo ago

what does "map an index" mean?

eager-peachOP•7mo ago

I want to create a page with a component who be showned in / like localhost:3000/

ratty-blush•7mo ago

since the code you posted is the default, the issue must be in the app config or runtime. try comparing against our examples it could also be that your root route does not render an outlet

eager-peachOP•7mo ago

app.config.ts

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
    define: {
      global: 'window',
    },
    resolve: {
      conditions: ['import', 'node'],
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
      alias: {
        '@mui/utils/capitalize': '@mui/utils/capitalize/index.js',
      },
    },
    optimizeDeps: {
      exclude: ['@react-pdf/renderer'],
    }
  },
  server: {
    preset: 'node',
    rollupConfig: {
      external: [/^@mui\/.*/],
      output: {
        format: 'esm',
      },
    },
  }
})

// app.config.ts
import { defineConfig } from '@tanstack/react-start/config'
import tsConfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  vite: {
    plugins: [
      tsConfigPaths({
        projects: ['./tsconfig.json'],
      }),
    ],
    define: {
      global: 'window',
    },
    resolve: {
      conditions: ['import', 'node'],
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
      alias: {
        '@mui/utils/capitalize': '@mui/utils/capitalize/index.js',
      },
    },
    optimizeDeps: {
      exclude: ['@react-pdf/renderer'],
    }
  },
  server: {
    preset: 'node',
    rollupConfig: {
      external: [/^@mui\/.*/],
      output: {
        format: 'esm',
      },
    },
  }
})

__root.tsx

import type { ReactNode } from 'react'
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
import globalStore from '../../src/store';
import { Provider } from 'react-redux';
import { IntercomProvider } from 'react-use-intercom';

import "../../src/style.scss";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'maximum-scale=1.0, initial-scale=1.0, width=device-width',
      },
    ],
    links: [
      {
        rel: 'icon',
        href: '/favicon.ico',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap',
      },
    ],
  }),
  component: RootComponent
})

const INTERCOM_APP_ID = 'j8ntmoix';

function RootComponent() {
  const { store } = globalStore();
  return (
    <RootDocument>
      <Provider store={store}>
        <IntercomProvider appId={INTERCOM_APP_ID} autoBoot={true}>
          <div className="container-fluid">
            <Outlet />
          </div>
        </IntercomProvider>
      </Provider>
    </RootDocument>
  )
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <TanStackRouterDevtools position='top-right' />
        <Scripts />
      </body>
    </html>
  )
}

import type { ReactNode } from 'react'
import {
  Outlet,
  createRootRoute,
  HeadContent,
  Scripts,
} from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools';
import globalStore from '../../src/store';
import { Provider } from 'react-redux';
import { IntercomProvider } from 'react-use-intercom';

import "../../src/style.scss";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'maximum-scale=1.0, initial-scale=1.0, width=device-width',
      },
    ],
    links: [
      {
        rel: 'icon',
        href: '/favicon.ico',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Lora:wght@600&display=swap',
      },
    ],
  }),
  component: RootComponent
})

const INTERCOM_APP_ID = 'j8ntmoix';

function RootComponent() {
  const { store } = globalStore();
  return (
    <RootDocument>
      <Provider store={store}>
        <IntercomProvider appId={INTERCOM_APP_ID} autoBoot={true}>
          <div className="container-fluid">
            <Outlet />
          </div>
        </IntercomProvider>
      </Provider>
    </RootDocument>
  )
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
  return (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        {children}
        <TanStackRouterDevtools position='top-right' />
        <Scripts />
      </body>
    </html>
  )
}

For me it doesn't make any sense @Manuel Schiller if you have 5 minutes for me I can show you in a Discord call

ratty-blush•7mo ago

sorry not right now do other routes work? just not the index?

eager-peachOP•7mo ago

yes others works just the index doesn't work

ratty-blush•7mo ago

what's the server response? anything or nothing?

eager-peachOP•7mo ago

nothing

ratty-blush•7mo ago

any logs on the server side?

eager-peachOP•7mo ago

nopr

ratty-blush•7mo ago

and did that never work or just recently?

eager-peachOP•7mo ago

Never work since the beginning

ratty-blush•7mo ago

how do you launch? node, bun, ... ?

eager-peachOP•7mo ago

Node Do you want the router.tree.gen ?

ratty-blush•7mo ago

could help yes

eager-peachOP•7mo ago

routetree gen

message.txt

eager-peachOP•7mo ago

@Manuel Schiller do you need more code to debug it? Thing i have observed (I don't know if it help) If i have an /(app)/route.tsx, when i go to /users (who is present to /(app)/users/index.tsx) it render /index.tsx instead

ratty-blush•7mo ago

route groups in (...) are only meant for grouping things in folders they are not relevant for nesting etc so /(app)/route.tsx wont ever be rendered

eager-peachOP•7mo ago

The thing is i want to have /users and /workspace who share same layout and others not

ratty-blush•7mo ago

then you need a pathless route

eager-peachOP•7mo ago

I have already try to do a /(app)/_pathless.tsx doesn't rendered

ratty-blush•7mo ago

_mySuperFancyLayout.tsx // << put the layout that shall be shared here
/_mySuperFancyLayout
  /users
     index.tsx
  /workspace
     foo.tsx
hello.tsx // <<< this wont be rendered inside of _mySuperFancyLayout

_mySuperFancyLayout.tsx // << put the layout that shall be shared here
/_mySuperFancyLayout
  /users
     index.tsx
  /workspace
     foo.tsx
hello.tsx // <<< this wont be rendered inside of _mySuperFancyLayout

ratty-blush•7mo ago

https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#pathless-layout-routes

Routing Concepts | TanStack Router React Docs

TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...

eager-peachOP•7mo ago

Okay it works but the bug with localhost:3000 (/index.tsx) still present still not available for a quick call ?

ratty-blush•7mo ago

dm'ed you

eager-peachOP•7mo ago

I close the issue, As we seen index.html is present in public folder so It render it instead of JS component. Thanks ! Your solution seems not to work I open another issue

Gaming

Programming

Impossible to have Index route working

Did you find this page helpful?