bug: useIonRouter is undefined

[SeverinPeter92]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

I'm trying to destruct the navigate function from useIonRouter. But useIonRouter will throw a Typescript error

Uncaught TypeError: Cannot destructure property 'canGoBack' of '(0 , vue__WEBPACK_IMPORTED_MODULE_0__.inject)(...)' as it is undefined.

Expected Behavior

The function navigate can be desctructured from useIonRouter

Steps to Reproduce

Import useIonRouter from @ionic/vue
Destructure the function navigate from useIonRouter

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI: 6.20.1
Ionic Framework : @ionic/vue 6.2.6

Capacitor:

Capacitor CLI : 4.3.0
@capacitor/android : 4.3.0
@capacitor/core : 4.3.0
@capacitor/ios : 4.4.0

Utility:

cordova-res : 0.15.4
native-run : 1.7.0

System:

NodeJS : v16.16.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.2
OS : Windows 10

Additional Information

No response

[sean-perkins]

Hello @SeverinPeter92 thank you for this issue.

This error occurs when useIonRouter is incorrectly used without a router instance. The underlying injectable navManager is undefined, so destructuring the object results in an error.

Can you provide a reproduction?

Using the Ionic tabs starter with these additions to the explore container, does not result in an error:

import { defineComponent } from "vue";

+import { useIonRouter } from "@ionic/vue";

export default defineComponent({
  name: "ExploreContainer",
  props: {
    name: String,
  },
+  setup() {
+    const { navigate } = useIonRouter();
+    console.log("navigate", navigate);
+  },
});
</script>

[SeverinPeter92]

It took me a while but i could reproduce the bug once more. It appears when you have a function on the back button that uses useIonRouter. Sadly i have a case where i have to do this since the back button would otherwise route me in a infinite loop.

<template>
    <ion-page>
        <ion-header mode="ios" translucent>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button
                        text="Zurück"
                        default-href="/tabs/tab1"
                        @click="testFunction"
                    />
                </ion-buttons>
            </ion-toolbar>
        </ion-header>

        <ion-content fullscreen>

        </ion-content>
    </ion-page>
</template>

<script setup lang="ts">
import { IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton, useIonRouter } from "@ionic/vue";

const testFunction = () => {
    const { navigate } = useIonRouter()

    console.log(navigate)
}

</script>

<style scoped>

</style>

[sean-perkins]

@SeverinPeter92 since useIonRouter is dependent on inject() it can only be used inside of a setup() function or a functional component.

For example, you would likely need to refactor your implementation to:

<script setup lang="ts">
import { IonPage, IonContent, IonHeader, IonToolbar, IonButtons, IonBackButton, useIonRouter } from "@ionic/vue";

const { navigate } = useIonRouter();

const testFunction = () => {
   console.log(navigate);
}
</script>

[SeverinPeter92]

Thanks that solved the issue.