Upgrading to vue 3.4+ causes useRoute to be undefined inside computed

44 Views Asked by At

I have code like this. It generates tabs object for my components

export function generateRouterTabs (tabs?: RouteRecordRaw[] | undefined, tabsName?: string): {
  name: string
  tabs: IRouterTab[]
} {
  const route = useRoute()

  const mappedName = tabsName || route.name as string | undefined || ''

  const mappedTabs = (tabs || route.matched.find(route => {
    return route.name === route.meta.parentName
  })?.children) || []

  return {
    name: mappedName,
    tabs: mappedTabs.map(_route => ({
      label: _route.meta?.label || '',
      routeName: _route.name as string,
      appComponentID: _route.meta?.appComponentId
    }))
  }
}

Inside of script:setup of one of those components, I wrap this function call in a computed property like this:

const tabs = computed(() => generateRouterTabs())

It fails with an error, saying

Cannot read properties of undefined, reading 'name'

and points to this line of code

const mappedName = tabsName || **route.name** as string | undefined || ''.

I've tried using optional chaining, but that breaks the app and does not return any tabs or a name. Also I tried to pass tabs and tabsName as arguments and it did work. Though, the project is quite big and I wouldn't want to refactor it everywhere, especially if the bug comes from the vue dev team.

To remind you, it's only after I upgrade vue to 3.4+. The project exists for about 2 years and this was not a problem before.

Be very grateful for any assistance.

Also, you can ask me for any additional info that might help you look into the problem deeper.

0

There are 0 best solutions below