T
TanStack•2y ago
correct-apricot

useMatchRoute: Type instantiation is excessively deep and possibly infinite.(2589)

I keep getting the "Type instantiation is excessively deep" error when trying to use useMatchRoute if I have a validateSearch somewhere in my tree. I edited the quickstart example on stackblitz for a demo but stackblitz is acting up so I'll just paste it here: 
import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import {
  RouterProvider,
  createRouter,
  createRoute,
  createRootRoute,
  useMatchRoute,
} from '@tanstack/react-router'

const rootRoute = createRootRoute({})


const aRoute = createRoute({
  getParentRoute() { return rootRoute },
  path: 'a',
})

const bRoute = createRoute({
  getParentRoute() { return aRoute },
  path: 'b',
})

const cRoute = createRoute({
  getParentRoute() { return bRoute },
  path: 'c',
  validateSearch: () => ({key: 'val'}),
})

function A() {
  useMatchRoute()({to: '/'})
}

const routeTree = rootRoute.addChildren([aRoute.addChildren([bRoute.addChildren([cRoute])])])

const router = createRouter({ routeTree, defaultPreload: 'intent' })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  )
}
import React, { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import {
  RouterProvider,
  createRouter,
  createRoute,
  createRootRoute,
  useMatchRoute,
} from '@tanstack/react-router'

const rootRoute = createRootRoute({})


const aRoute = createRoute({
  getParentRoute() { return rootRoute },
  path: 'a',
})

const bRoute = createRoute({
  getParentRoute() { return aRoute },
  path: 'b',
})

const cRoute = createRoute({
  getParentRoute() { return bRoute },
  path: 'c',
  validateSearch: () => ({key: 'val'}),
})

function A() {
  useMatchRoute()({to: '/'})
}

const routeTree = rootRoute.addChildren([aRoute.addChildren([bRoute.addChildren([cRoute])])])

const router = createRouter({ routeTree, defaultPreload: 'intent' })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

const rootElement = document.getElementById('app')!
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement)
  root.render(
    <StrictMode>
      <RouterProvider router={router} />
    </StrictMode>,
  )
}
Am I missing something?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?