correct-apricot

Cannot read properties of undefined( reading 'routeId')

Sometimes, I'm having this runtime error while routing. https://github.com/TanStack/router/issues/704 3 months ago I created this Github issue. I was using "@tanstack/react-router": "^0.0.1-beta.173" and it was fixed by @Tanner Linsley . However, it recurred. I switched to "@tanstack/react-router": "^0.0.1-beta.225" from "@tanstack/react-router": "^0.0.1-beta.194" and it occurred again. Unfortunately, this is a showstopper. Note: I upgraded to .234 and still having the same issue.

GitHub

Runtime Error While Routing : Uncaught runtime errors: ERROR Cannot...

Describe the bug I'm having this runtime error while routing a heavyweight page and go back immediately after the page loads. This problem only occurs on local webpack-dev-server but not on pro...

11 Replies

optimistic-gold•2y ago

I’m also running into the same issue after updating to 235 today. @Tanner Linsley Appreciate any help to resolve this

fascinating-indigo•2y ago

Codesandbox/stackblitz repro?

optimistic-gold•2y ago

Its resolved now in 236. 🙌🏼 Thank you @Tanner Linsley

fascinating-indigo•2y ago

👍

correct-apricotOP•2y ago

Yes, it is solved. Thanks! @Tanner Linsley

correct-apricot•2y ago

@Tanner Linsley this came up on @tanstack/react-router@1.3.5

const contactsSchema = z.object({
    count: z.number().catch(50),
    page: z.number().catch(1),
})

export const Route = new FileRoute('/_auth-layout/$teamId/contacts/').createRoute({
    validateSearch: contactsSchema,
    component: () => {
        return (
            <DataEntityLayout pathName='contacts' recordName='Contact'>
                <ContactsTable />
            </DataEntityLayout>
        )
    },
    pendingComponent: LoadingSpinner,
})

const contactsSchema = z.object({
    count: z.number().catch(50),
    page: z.number().catch(1),
})

export const Route = new FileRoute('/_auth-layout/$teamId/contacts/').createRoute({
    validateSearch: contactsSchema,
    component: () => {
        return (
            <DataEntityLayout pathName='contacts' recordName='Contact'>
                <ContactsTable />
            </DataEntityLayout>
        )
    },
    pendingComponent: LoadingSpinner,
})

export default function ContactsTable() {
    const routeApi = new RouteApi({ id: '/_auth-layout/$teamId/contacts/' })
    const searchParams = routeApi.useSearch()


    return (
        <DataTable
            columns={columns}
            data={mockData}
            // searchParams={{ count: 50, page: 1 }}
            searchParams={searchParams}
        />
    )
}

export default function ContactsTable() {
    const routeApi = new RouteApi({ id: '/_auth-layout/$teamId/contacts/' })
    const searchParams = routeApi.useSearch()


    return (
        <DataTable
            columns={columns}
            data={mockData}
            // searchParams={{ count: 50, page: 1 }}
            searchParams={searchParams}
        />
    )
}

Looks like commenting out const searchParams = routeApi.useSearch() and using searchParams={{ count: 50, page: 1 }} makes the error go away

exotic-emerald•2y ago

@DiamondDragon can you provide a minimal example on codesandbox?

correct-apricot•2y ago

https://stackblitz.com/edit/tanstack-router-hizrrb?file=src%2FTestComponent.tsx here you go. i think what's happening is i don't have a top level /route file.. instead i have the below. So test/ does not match test

test (directory)
  index.tsx (`test/`)
  $testId.tsx (`test/$testId`)

test (directory)
  index.tsx (`test/`)
  $testId.tsx (`test/$testId`)

perhaps a misunderstanding on my end. do we always need to have the top level test route file even if you just render an outlet?

austinm911

StackBlitz

Router Basic File Based Example (forked) - RouteApi troubleshooting...

Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz

exotic-emerald•2y ago

that's a question for @Tanner Linsley

fascinating-indigo•2y ago

No You shouldn’t need to create route benches for paths that only render outlet

correct-apricot•2y ago

So it appears the routeGen has two top level

test (directory)
  index.tsx (`test/`)
  $testId.tsx (`test/$testId`)

test (directory)
  index.tsx (`test/`)
  $testId.tsx (`test/$testId`)

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  ...
  TestTestIdRoute,
  TestIndexRoute,

])

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  ...
  TestTestIdRoute,
  TestIndexRoute,

])

One thing i was wondering when i saw that is I wasn't sure if the route tree should look like this instead (that's why i was wondering if you need an empty or Outlet only route

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  ...
  TestRoute.addChildren([
     TestTestIdRoute,
     TestIndexRoute,
  ])
])

export const routeTree = rootRoute.addChildren([
  IndexRoute,
  ...
  TestRoute.addChildren([
     TestTestIdRoute,
     TestIndexRoute,
  ])
])

Gaming

Programming

Cannot read properties of undefined( reading 'routeId')

Did you find this page helpful?