Lifecyle hooks sometimes missing `this` scope

Ionic Framework Ionic Vue
1

Our error monitoring is sometimes reporting that a page using options api has this scope null in ionViewDidEnter and ionViewDidLeave? It doesn’t happen much, but once in a while. Why would that be?

2

Can you show an example of a component where this is happening? Are you using these hooks? Assuming you are using the Options API and not Composition and setup?

3

Hi @twestrick ,

The code looks like this (abbreviated):

<script>
  export default {
     ionViewDidEnter () {
        this.sessionStore.start()
     },
     ionViewDidLeave () {
        this.sessionStore.stop()
     }
  }
</script>

Those hooks usually are called and work fine. But there seems to be some very occasional issue where either of those hooks throws an exception like this:

TypeError · Cannot read properties of null (reading 'sessionStore')

So that means this is null.

I can’t set up an MRE, because it’s a bit rare and I don’t know the circumstances that cause it.

4

Where/how is sessionStore being declared?

5

Pinia mapStores like this:

computed: {
   ...mapStores(useSessionStore),
}

But since this is null, is the problem at the component level context?

6

Not really sure. I have not used mapStores as I primarily use the Composition API and just declare the stores like so:

const sessionStore = useSessionStore()

In older components that still use the Options API and haven’t been converted, I just use the setup method for my stores (so kinda mixing Options and Composition). There is less magic going on doing it this way :smile:

export default defineComponent({
    methods: {
        doStuff(): void {
            sessionStore.doSomething()
        }
    },
    setup() {
        const sessionStore = useSessionStore()

        return {
            sessionStore
        }
    },
})
7

It seems to be related to having not disabled hardwareBackButton in the Ionic config. So if the user swiped to navigate it could have changed the route to pages that they shouldn’t be able to go to and that did not have the required state for them to work properly. Still, I’m not sure why this would have been null. In any event, I disabled hardwareBackButton and reimplemented the particular page that the error occurred on to use script setup instead. So we’ll see if there are any more issues once it gets into the users’ hands.

Thanks.

1 Like