flat-fuchsia

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

continuing-cyan•10mo ago

what does "map an index" mean?

flat-fuchsiaOP•10mo ago

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

continuing-cyan•10mo 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

flat-fuchsiaOP•10mo 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

continuing-cyan•10mo ago

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

flat-fuchsiaOP•10mo ago

yes others works just the index doesn't work

continuing-cyan•10mo ago

what's the server response? anything or nothing?

flat-fuchsiaOP•10mo ago

nothing

continuing-cyan•10mo ago

any logs on the server side?

flat-fuchsiaOP•10mo ago

nopr

continuing-cyan•10mo ago

and did that never work or just recently?

flat-fuchsiaOP•10mo ago

Never work since the beginning

continuing-cyan•10mo ago

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

flat-fuchsiaOP•10mo ago

Node Do you want the router.tree.gen ?

continuing-cyan•10mo ago

could help yes

flat-fuchsiaOP•10mo ago

routetree gen

message.txt

flat-fuchsiaOP•10mo 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

continuing-cyan•10mo 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

flat-fuchsiaOP•10mo ago

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

continuing-cyan•10mo ago

then you need a pathless route

flat-fuchsiaOP•10mo ago

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

continuing-cyan•10mo 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

continuing-cyan•10mo 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...

flat-fuchsiaOP•10mo ago

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

continuing-cyan•10mo ago

dm'ed you

flat-fuchsiaOP•10mo 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?