Using Ionic Tabs In Storybook Vue Error

Ionic Framework Ionic Vue
1

trying to render the tab page or even the tab tar in storybook, but getting an error

TypeError: Cannot read properties of undefined (reading 'getCurrentRouteInfo')

which I am certain is related to the fact there is an ion-router-outlet on the page… curious if there is a suggestion on a way to resolve this. I just want to allow the designer to work on the tab bar components in Storybook

1 Like
2

@aaronksaunders
Had the same issue, broke many of my storybook components (e.g. attr could not be dynamically changed without storybook throwing an error). :frowning:

Luckily figured out the following workaround:

// .storybook/router.ts    (or any other filename)
import {type RouteRecordRaw} from 'vue-router'
import {createRouter, createWebHistory} from '@ionic/vue-router' // IMPORTANT, use the @ionic one!

const routes: Array<RouteRecordRaw> = []
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

export default router

and then:

// .storybook/preview.ts
import {setup, type Preview} from '@storybook/vue3'
import router from './router'

setup(async (app) => {
  app.use(router)
})

const preview: Preview = {}

export default preview

This gets rid of the error and allows you to use the storys again and dynamically change the props.
Now I am getting this error in DevTools but so far it didn’t bother me :slight_smile:

Runtime.mjs:4 TypeError: Cannot read properties of undefined (reading 'pathname')
    at IonTabBar.js:71:35