Regarding the error after upgrade to vue3

[kae-at-seventh-root]

Hi there, I'am a new of Vue and Quasar.
I would like to ask a question regarding an issue that I am facing. I upgraded the quasar framework and updated vue to version 3 successfully on my local environment. However, when I deployed it on the production environment, it did not
work at all.

The following error appeared in the Chrome console:

vendor.a5622bd0.js:4228 TypeError: u.then is not a function
    at vendor.a5622bd0.js:4228:13819
    at vendor.a5622bd0.js:4228:22486

↓

function He(e, t, n, r) {
            const i = [];
            for (const o of e) {
                0;
                for (const e in o.components) {
                    let s = o.components[e];
                    if ("beforeRouteEnter" === t || o.instances[e])
                        if (ze(s)) {
                            const a = s.__vccOpts || s
                              , u = a[t];
                            u && i.push(Ve(u, n, r, o, e))
                        } else {
                            let u = s();
                            0,
      →                  i.push((()=>u.then((i=>{
                                if (!i)
                                    return Promise.reject(new Error(`Couldn't resolve component "${e}" at "${o.path}"`));
                                const s = a(i) ? i.default : i;
                                o.components[e] = s;
                                const u = s.__vccOpts || s
                                  , l = u[t];
                                return l && Ve(l, n, r, o, e)()
                            }
                            ))))
                        }
                }
            }
            return i
        }

My environment is:

Operating System - Darwin(22.3.0) - darwin/arm64
NodeJs - 16.4.0

Global packages
  NPM - 7.18.1
  yarn - 1.22.19
  @quasar/cli - 2.0.0
  @quasar/icongenie - Not installed
  cordova - 11.1.0

Important local packages
  quasar - 2.11.10 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.7.2 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.2 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.47 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.1.6
  pinia - Not installed
  vuex - 4.1.0 -- state management for Vue.js
  electron - 24.0.0 -- Build cross platform desktop apps with JavaScript, HTML, and CSS
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.21.4 -- Babel compiler core.
  webpack - 5.77.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.13.2 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - 6.5.4 -- A plugin for your Webpack build process, helping you generate a manifest of local files that workbox-sw should precache.
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 5.0.3 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - 2.5.0 -- Capacitor: cross-platform mobile apps with the web
  @capacitor/cli - 2.5.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 2.5.0 -- Capacitor: cross-platform mobile apps with the web
  @capacitor/ios - 2.5.0 -- Capacitor: cross-platform mobile apps with the web

Quasar App Extensions
  *None installed*

Networking
  Host - Katsushis-MacBook-Air.local
  en0 - 192.168.1.8
  utun5 - 10.8.0.22

In addition, I am using the following configuration:

"firebase": "^8.3.1",
"vue-router": "^4.1.6",
"@quasar/app": "^3.3.3",
"node": ">= 10.18.1",
"typescript": "^5.0.3",
"webpack": "^5.76.2",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.12.0",
"workbox-webpack-plugin": "^6.1.2"

I will also paste the configuration for router.ts, which may be causing the issue:

import type{ RouteRecordRaw } from 'vue-router';
import ListLayout from 'layouts/ListLayout.vue';
import Login from 'components/Login.vue';
import MyPage from 'pages/MyPage.vue';
import Detail from 'pages/SentenceDialog.vue';
import List from 'pages/List.vue';
import LoginTutorial from 'components/LoginTutorial.vue';
import SearchMyData from 'components/SearchMyData.vue';
import PrivacyPolicy from 'components/PrivatePolicy.vue';
import HowToUse from "components/HowToUse.vue";
import MoupicManagement from "pages/MoupicManagement.vue";
import Transcribe from "components/Transcribe.vue";
import TaskItemListPage from "components/TaskPage/TaskItemListPage.vue";
import TaskPage from 'components/TaskPage/TaskPage.vue';


const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component:() =>  ListLayout,
    children: [
      { name: 'list', path: '/', component: ()=> List },
      { name: 'lang' , path: '/lang/:lang/targetLang/:targetLang' , component: ()=> List },
      { name: 'myPage', path: '/my_page', component: () => MyPage },
      { name: 'searchMyData', path: '/searchMyData', component: () => SearchMyData }
    ]
  },
  {
    path: '/',
    component: () => ListLayout,
    children: [
      {
        path: '/taskPageList',
        name: 'taskPageList',
        component: () => TaskItemListPage
      },
      {
        name: 'sentence',
        path: 'user/:uid/sentence/:sentenceManageId',
        component: () => Detail
      },
      {
        name: 'sentence',
        path: 'user/:uid/sentence/:sentenceManageId/key/:key',
        component: () => Detail
      },
      {
        name: 'transcribe',
        path: 'transcribe',
        component: () => Transcribe
      },
      {
        path: '/howToUse',
        name: 'howToUse',
        component: () => HowToUse
      },
      {
        path: 'user/:createdUserId/developwords/detail/:taskPageId',
        name: 'taskDetail',
        component: () => TaskPage,
      },
      {
        path: 'user/:createdUserId/developwords/detail/:taskPageId',
        name: 'detail_new',
        component: () => TaskPage,
      },
    ]
  },
  {
    name: 'loginTutorial',
    path: '/login_tutorial',
    // component: LoginTutorial
    component: () => LoginTutorial
  },
  {
    name: 'moupicManagement',
    path: '/moupic_management',
    // component: MoupicManagement
    component: () => MoupicManagement
  },
  {
    name: 'privacyPolicy',
    path: '/privacy_policy',
    // component: PrivacyPolicy
    component: () => PrivacyPolicy
  },
  {
    path: '/login',
    name: 'login',
    // component: Login
    component: () => Login
  },

  // Always leave this as last one,
  // but you can also remove it
  {
    name: '404',
    path: '/:catchAll(.*)',
    component: () => import('pages/Error404.vue')
  }
];

export default routes;