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