I am trying to upgrade my project from vue 2 to vue 3. But constantly I getting errors. This is my new console error:

vue-router.mjs:3499 Uncaught TypeError: Cannot read properties of undefined (reading 'location')

And this is line 3499:

push(routerHistory.location).catch(err => {
                    if ((process.env.NODE_ENV !== 'production'))
                        warn('Unexpected error when starting the router:', err);
                });

The file is in node_modules (front/node_modules/vue-router/dist/vue-router.mjs) How can I fix it?

I am using: "vue-router": "^4.1.2",

main.js:

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');

router/index.js

// 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 = [
  {
    path: '/form/:form/step-:step',
    name: 'FormStep',
    component: FormStep,
  }, {
    path: '/form/:form/step-:step/:related',
    component: FormStep,
  }, {
    path: '',
    name: 'ListTable',
    component: ListTable,
  }, {
    path: '/:status.html',
    component: ListTable,
  }, {
    path: '/personal/',
    component: ListTable,
  }, {
    path: '/personal/:status.html',
    component: ListTable,
  }, {
    path: '/aggregator/',
    component: ListTable,
  }, {
    path: '/aggregator/:status.html',
    component: ListTable,
  }, {
    path: '/config/case_and_process_types.html',
    component: DualTable,
  }, {
    path: '/run_stage/:id/',
    name: 'StageScreen',
    component: StageScreen,
  }, {
    path: '/capture/:id/',
    name: 'CaptureScreen',
    component: CaptureScreen,
  }, {
    path: '/capture_from_email/:email/:id/',
    name: 'EmailCaptureScreen',
    component: EmailCapture,
  }, {
    path: '/config/screens/:id.html',
    name: 'ScreenConfig',
    component: TopScreenConfig,
  }, {
    path: '/config/:model/',
    name: 'ConfigList',
    component: ListTable,
  }, {
    path: '/emails/',
    name: 'Emails',
    component: ListTable,
  },
];

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;

Is it about Vue.use(VueRouter); ?

CodePudding user response：

You need to replace the mode: 'history' with history: createWebHistory() property, as the mode property is deprecated in version 4.

For more resources.

https://router.vuejs.org/guide/migration/index.html#new-history-option-to-replace-mode

This is a resource for migration from Vue 2 to Vue 3

https://router.vuejs.org/guide/migration/index.html

CodePudding user response：

The router instance should be created in this way :

import { createRouter,createWebHashHistory } from 'vue-router';
....
const router = createRouter({
 history: createWebHashHistory(),
  base: process.env.BASE_URL,
  routes,
});