bug: Uncaught (in promise): TypeError: enteringEl is undefined

ZachHandley commented 1 year ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Currently I am navigating from a route of / to /account after the user is authenticated. Rather than navigating there, it does nothing and gives me the error above, and does not change the view. If I refresh the page it loads the new page route but doesn't load any content, despite the content existing

Expected Behavior

It loads the new page as defined in my routes index.ts file and content loads

Steps to Reproduce

Have your App.vue with an ion-router-outlet, with an AppBar and a Navigation Drawer above it
Have an ion-page inside each HomePage and AccountPage views (.vue files)
Navigate to AccountPage using router.push and get the above error

Code Reproduction URL

No response

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
   - /usr/local/lib/node_modules/@ionic/cli/lib/index.js
   - /usr/local/lib/node_modules/@ionic/cli/index.js
   - /usr/local/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 7.0.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 7.0.3

Capacitor:

Capacitor CLI : 4.7.3 @capacitor/android : not installed @capacitor/core : 4.7.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v20.0.0 (/usr/local/Cellar/node/20.0.0/bin/node) npm : 9.6.4 OS : macOS Unknown

Additional Information

I'm having this error Uncaught (in promise) TypeError: enteringEl is undefined show up in console when I use router.push in Ionic to go from the home view to the profile view (for editing profile and what not)

I have already modified the templates and added ion-page as a wrapper to make sure it's not that, I can't quite understand what's going on. Home page loads just fine, but the other weird thing is when I go to the account page it straight up has no content on the page. I'm not sure what to do with that either as it's very hard to debug this and Google is showing me very few results.

Home Page (redirected from)

<template>
  <ion-page>
    <ion-content>
      <HomeHero />
      <HomeTournament />
      <HomeLivestreams />
      <HomeMusic />
      <HomeCTA />
      <HomeFooter />
    </ion-content>
  </ion-page>
</template>
<script setup lang="ts">
import { IonContent, IonPage } from "@ionic/vue";
import HomeHero from "@/components/HomeHero.vue";
import HomeTournament from "@/components/HomeTournament.vue";
import HomeLivestreams from "@/components/HomeLivestreams.vue";
import HomeMusic from "@/components/HomeMusic.vue";
import HomeCTA from "@/components/HomeCTA.vue";
import HomeFooter from "@/components/HomeFooter.vue";
</script>

My AccountPage (that it gets redirected to)

<template>
  <ion-page class="account">
    <ion-content>
      <ion-grid>
        <ion-row>
          <ion-col size="12" size-md="6">
            <ion-card>
              <ion-card-header>
                <ion-card-title>Account Info</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                <ion-list>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="Username"
                      labelPlacement="stacked"
                      :value="authVars.name"
                    ></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="Email"
                      labelPlaement="stacked"
                      :value="authVars.email"
                    ></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-label position="stacked">Gender</ion-label>
                    <!-- MARK// ADD GENDER SELECT HERE -->
                  </ion-item>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="First Name"
                      labelPlaement="stacked"
                      :value="firstName"
                    ></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="Last Name"
                      labelPlaement="stacked"
                      :value="lastName"
                    ></ion-input>
                  </ion-item>
                </ion-list>
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

// Login to be redirected to account page
const submitLogin = async () => {
  const isFormCorrect = await login$v.value.$validate();
  if (!isFormCorrect) return;
  console.log("Login Submitted with details: ", logInput.value);
  const accountLogged = await auth.Login(
    logInput.value.email,
    logInput.value.password
  );
  if (accountLogged.type === "success") {
    const navResult = await router.push("/account");
    if (navResult) {
      // Navigation failed
      console.log("Navigation failed to account page");
    } else {
      console.log("Navigation to account page successful");
    }
  }
};
// index.ts for router
import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import HomePage from "../views/HomePage.vue";
// import AccountPage from "../views/AccountPage.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: HomePage,
  },
  {
    path: "/account",
    name: "My Account",
    component: () => import("@/views/AccountPage.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import HomePage from "../views/HomePage.vue";
// import AccountPage from "../views/AccountPage.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: HomePage,
  },
  {
    path: "/account",
    name: "My Account",
    component: () => import("@/views/AccountPage.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

What I don't understand is how my app is supposed to be laid out. Meaning do I need another ion-router-outlet? this is my App.vue

<template>
  <ion-app>
    <AppNavDrawer />
    <AppBar />
    <ion-router-outlet id="main-content" />
  </ion-app>
</template>

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

ZachHandley commented 1 year ago

https://github.com/ZachHandley/ionic-router-bug here's an example Ionic Vue setup -- Currently it needs an AppWrite instance which is available from appwrite.com and config setup in /src/core/constants.ts with just the basics of an appwrite instance for a project setup for members to login/register. it's very easy to remove that functionality, all of it is in /src/store/auth.ts

ZachHandley commented 1 year ago

After talking to the Appwrite Developers, I found out Appwrite's SDK's are not reactive and this is the improper way of doing this. I'm not sure the issue is resolved so I'll close this after testing

liamdebeasi commented 1 year ago

Does this issue reproduce even after making the Appwrite changes?

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!

ionic-team / ionic-framework