Cannot read property 'classList' of undefined - Tabs issue

I’ve seen a lot of posts about this in Github but nothing seems to be the same issue for me / resolving it. My gut says we’ve done something wrong in our routes but can’t seem to spot it. Here’s our routes definitions:

const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      redirect: "/login",
    },
    {
      path: "/login",
      name: "Login",
      component: Login,
    },
    {
      path: "/tabs/",
      component: Tabs,
      children: [
        {
          path: "feed/",
          name: "Feed",
          component: Feed,
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "help",
          name: "Help",
          component: () => import("@/views/Help.vue"),
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "profile",
          name: "Profile",
          component: () => import("@/views/Settings.vue"),
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "profile/text-size",
          name: "TextSize",
          component: () => import("@/views/SettingTextSize.vue"),
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "profile/scroll-speed",
          name: "ScrollSpeed",
          component: () => import("@/views/SettingScrollSpeed.vue"),
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "feed/blog/slug-:slug",
          name: "View Blog No ID",
          component: () => import("@/views/ViewBlog.vue"),
          beforeEnter: async (to, from, next) => {
            const result = await contentApi.get(`/industries/1/content/slug-${to.params.slug}`);
            next({
              name: "View Blog",
              params: {
                contentId: result.data.content.id,
              }
            });
          },
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "feed/blog/:contentId",
          name: "View Blog",
          component: () => import("@/views/ViewBlog.vue"),
          meta: {
            requiresLogin: true,
          },
        },
        {
          path: "feed/videos/:contentId",
          name: "View Video",
          component: () => import("@/views/ViewVideo.vue"),
          meta: {
            requiresLogin: true,
            requiresFeatures: ["pro"],
          },
        },
        {
          path: "feed/script/:contentId",
          name: "View Script",
          component: () => import("@/views/ViewScript.vue"),
          meta: {
            requiresLogin: true,
          },
          beforeEnter: async (to, from, next) => {
              /** reset script store data to make sure previous script doesn't show */
              store.dispatch("scriptStore/reset");
              next();
          }
        },
      ],
    },
    {
      path: "/rt/:scriptId",
      name: "RT",
      component: () => import("@/views/RTHome.vue"),
      meta: {
        requiresLogin: true,
      },
    },
    {
      path: "/rt/:scriptId/rehearse",
      name: "RT Rehearse",
      component: () => import("@/views/TeleprompterPage.vue"),
      meta: {
        requiresLogin: true,
      },
    },
    {
      path: "/rt/:scriptId/record",
      name: "RT Record",
      component: () => import("@/views/TeleprompterPage.vue"),
      meta: {
        requiresLogin: true,
      },
    },
    {
      path: "/rt/:scriptId/customize",
      name: "Customize Script",
      component: () => import("@/views/CustomizeScript.vue"),
      props: true,
      meta: {
        requiresLogin: true,
      },
    },
    {
      path: "/paywall",
      name: "Paywall",
      component: () => import("@/views/Paywall.vue"),
      props: true,
      meta: {
        requiresLogin: true,
      },
    },
    {
      path: "/rt/:scriptId/preview/:filePath",
      name: "Preview Video",
      component: () => import("@/views/RTPreview.vue"),
      props: true,
      meta: {
        requiresLogin: true,
      }
    }
  ];

Our app has a home view with 3 tabs. One of the tabs is a list of content, when you view a piece of content it stays within the tab view as a child page. There’s also a handful of pages that should show without the tab view.

If I open the app, navigate to ANY second page within the tabbed parent view, then to a view without the tabs, then go back to a view with tabs. I get the “TypeError: Cannot read property ‘classList’ of undefined”… Here’s the example chain of pages I’m navigating through to cause the error:

/tabs/feed
/tabs/feed/blog/3853
(BACK) /tabs/feed
/tabs/feed/script/3818
/rt/3818
(BACK) /tabs/feed/script/3818 -- breaks before this page loads, cannot read property 'classlist' of undefined

And here’s the error:

index.esm.js?d867:884 Uncaught (in promise) TypeError: Cannot read property 'classList' of undefined
    at isViewVisible (index.esm.js?d867:884)
    at handlePageTransition (index.esm.js?d867:1083)
    at setupViewItem (index.esm.js?d867:1173)
    at eval (index.esm.js?d867:941)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164)
    at Array.job (runtime-core.esm-bundler.js?5c40:1779)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?5c40:328)
    at flushJobs (runtime-core.esm-bundler.js?5c40:369)

Changing to use createWebHashHistory or createMemoryHistory does not help. All of the pages involved have an element and have the IonPage component registered.

We’re using ionic-native/core 5.36.0, ionic/vue 5.9.3, and ionic/vue-router 5.9.3… I’m at a total loss for what to do

1 post - 1 participant

Read full topic