Vue 2 - TypeError: Cannot read properties of undefined (reading '_router')

I'm upgrading the package okta/okta-vue from version 1.3.0 to 3.1.0. It also included installation of okta-auth-js package since version 2.0.0 of okta/okta-vue.

I followed the migration info according to the changelog and the migration guide: https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/CHANGELOG.md

https://github.com/okta/okta-vue/blob/okta-vue-3.2.0/MIGRATING.md

After following the guides, I recieve errors that seem to repeat themselves in the console such as:

[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read properties of undefined (reading '_router')"

TypeError: Cannot read properties of undefined (reading '_router')

TypeError: guard is not a function

[vue-router] uncaught error during route navigation:

The 3 first errors repeat themselves several times. I tried looking on other topics and saw some answers speaking about "this" which might cause the problem, but it doesn't seem to be the issue in my case.

Following is the routes.js code:

import DashboardLayout from 'src/components/Dashboard/Layout/DashboardLayout.vue'
import Overview from 'src/components/Dashboard/Views/Dashboard/Overview.vue'
// import Auth from '@okta/okta-vue'
import { LoginCallback } from '@okta/okta-vue'

import {
  routes_App1,
  routes_App3,
  routes_App4,
  ...,
  routes_App99
} from './routesDefinition'

// Dashboard Pages
const UserProfile = () => import ('src/components/Dashboard/Views/Pages/UserProfile.vue')

const routes = [
  {
    path: '/implicit/callback',
    name: 'Okta Callback',
    component: LoginCallback
    // component: Auth.handleCallback()
  }, {
    path: '/',
    component: DashboardLayout,
    redirect: '/overview',
    meta: {
      requiresAuth: true
    },
    children: [
      {
        base: '/',
        path: 'overview',
        name: 'Overview',
        component: Overview
      },
      {
        path: 'userprofile',
        name: 'User Profile',
        component: UserProfile
      },
      routes_App1,
      routes_App3,
      routes_App4,
      ...,
      routes_App99
    ]
  }, {
    path: '*',
    component: DashboardLayout,
    redirect: '/overview',
    meta: {
      requiresAuth: true
    }
  },
]
export default routes

If for any reason it matters, my company's app is written with Vue 2 in the fronted and PHP - Laravel in the backend.

The app worked completely fine before upgrading the package.

Here are some of the related packages versions I'm using (after the upgrade):

vue@2.7.10, vue-router@3.6.4, @okta/okta-auth-js@4.9.2, @okta/okta-vue@3.1.0, webpack@5.74.0

If there's any other important files I need to attach as code please let me know and I'll add them.

Please help me if anyone knows what might be the solution for those errors.

Edit: I upgraded to Webpack 5.74 recently and it didn't change anything.

Thanks in advance, Gady.