I am currently in the process of upgrading my Vue 2 project to Vue 3. However, I keep encountering errors consistently. The latest error message displayed on my console is as follows:
vue-router.mjs:3499 Uncaught TypeError: Cannot read properties of undefined (reading 'location')
The line causing the issue is number 3499 which contains the code snippet below:
push(routerHistory.location).catch(err => {
if ((process.env.NODE_ENV !== 'production'))
warn('Unexpected error when starting the router:', err);
});
This particular file is located within the node_modules directory at (front/node_modules/vue-router/dist/vue-router.mjs) Do you have any suggestions on how to resolve this?
The version of "vue-router" being used is: "^4.1.2",
In my main.js file:
import { library } from '@fortawesome/fontawesome-svg-core';
import {faSpinner} from '@fortawesome/free-solid-svg-icons';
import SortedTablePlugin from 'vue-sorted-table/src';
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
import { BootstrapVue3 } from 'bootstrap-vue-3';
import { createApp, h } from 'vue';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
library.add(
faSpinner,
);
const app = createApp({
render: () => h(App),
});
app.use(router);
app.use(BootstrapVue3);
app.use(SortedTablePlugin);
app.component('font-awesome-icon', FontAwesomeIcon);
app.component('font-awesome-layers', FontAwesomeLayers);
app.mount('#app');
In the router/index.js file:
// import Vue from 'vue';
import { createRouter } from 'vue-router';
import FormStep from '@/components/FormStep.vue';
import DualTable from '@/components/DualTable.vue';
import ListTable from '@/components/ListTable.vue';
import CaptureScreen from '@/components/CaptureScreen.vue';
import StageScreen from '@/components/StageScreen.vue';
import TopScreenConfig from '@/components/TopScreenConfig.vue';
import EmailCapture from '@/components/EmailCapture.vue';
import store from '@/store';
// Vue.use(VueRouter);
const routes = [
...
];
const router = createRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth) && !store.state.user.isAuthenticated) {
next('/login/');
return;
}
next();
});
export default router;
Could it possibly be related to Vue.use(VueRouter); ?