F7-svelte vite dev Error

I have been working on a f7-svelte app with tabs. I have a basic app with 4 tabs with navbars. I am loading these tabs like the usual way.

import Tab0 from "../pages/tab0/index.svelte"
 import Tab1 from "../pages/tab1/index.svelte"
 import Tab2 from "../pages/tab2/index.svelte"
 import Tab3 from "../pages/tab3/index.svelte"
var routes = [  
   path: '/tab3/',
   component: Tab3,
  path: '/tab2/',
   component: Tab2,
  path: '/tab1/',
  component: Tab1,
  path: '/tab0/',
  component: Tab0,

Everything other is the default you get from f7-cli.

I have postcss with tailwindcss and autoprefixer configured. As of now no css has been added.

This is the app.

In Production : Everything builds up well. But It is hard during development because :

When I Start the dev server (vite dev) I cannot navigate the tabs by clicking on tabbar. This is the error I have been getting from chrome dev tools.2022-02-25-100619_1600x1200_scrot (1)

This happens for every project I worked on(f7-svelte).

Everytime I have to make changes and deploy to vercel and see whether the changes worked.


I have to create another single page project and experiment there and add the changes to my current project.

Can anyone know what might be the reason for this? @nolimits4web .
Thanks in advance.

Hi! Maybe you can create a minimal project with the issue and drop the zip here so I can check?