Vue3 router not work for mobile

VueJS
1

Meteor.js: v2.5.1
Vue.js: v3.2.22
Vue router: v4.0.12

Work fine on web, but get follow error on mobile. This error get when change route, e.g. router.push({ name: 'Home' })

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <RouterView> 
  at <Root>

modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34614 Uncaught (in promise) TypeError: Cannot read property 'type' of null
    at unmountComponent (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34614)
    at unmount (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34530)
    at unmountChildren (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34658)
    at unmount (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34548)
    at unmountComponent (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34629)
    at unmount (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34530)
    at patch (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:33508)
    at ReactiveEffect.componentUpdateFn [as fn] (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34143)
    at ReactiveEffect.run (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:38962)
    at callWithErrorHandling (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:36512)
2

Meteor.js: v2.5.1
Vue.js: v3.2.23
Vue router: v4.0.12

Work fine on chrome, but get follow error on mobile. If had some comments or some component with slot, i will get the error when change route, e.g. router.push({ name: 'Demo' })

repo: GitHub - SvenWangChina/meteor-vue3-vue-router-demo: A project with meteor.js+vue3+vue-router+vuex

Home.vue

<template>
    <div class="page-container">
        <app-spacer>test slot</app-spacer>
        <div @click="onGoDemo">Go Demo</div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router';

import AppSpacer from '../../components/AppSpacer/index.vue';

export default defineComponent({
    name: 'Home',
    components: { 'app-spacer': AppSpacer },
    setup(_props, _ctx) {
        const router = useRouter();
        const showTips = ref(true);
        function onGoDemo() {
            router.push({ name: 'Demo' });
        }

        return {
            showTips,
            onGoDemo,
        };
    },
});
</script>

<style scoped>
.page-container {
    color: #000;
}
</style>


[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <RouterView> 
  at <Root>

modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34614 Uncaught (in promise) TypeError: Cannot read property 'type' of null
    at unmountComponent (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34614)
    at unmount (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34530)
    at unmountChildren (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34658)
    at unmount (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34548)
    at unmountComponent (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34629)
    at unmount (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34530)
    at patch (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:33508)
    at ReactiveEffect.componentUpdateFn [as fn] (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:34143)
    at ReactiveEffect.run (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:38962)
    at callWithErrorHandling (modules.js?hash=51e33e4b97563d701eb5551f189030f2ce898b27:36512)
3

Maybe not yet support TypeScript.

4

I used TypeScript for all project. :joy:

5

I’am not sure, could check this Get error for `Meteor + Vue3 + Element Plus UI` - #2 by akryum

1 Like
6

Now could try GitHub - Altruistiq/meteor-vue3 (TypeScript Support)

7

Thanks for you, but it can’t fix this issue.