Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Pathum's avatar

Possible reasons for " Cannot redefine property " Error ?

Every time when i login to app browser returns this errror,

app.js:48343 Uncaught TypeError: Cannot redefine property: $router
    at Function.defineProperty (<anonymous>)
    at Function.install (VM2222 app.js:48343)
    at Function.Vue.use (VM2222 app.js:19039)
    at Object.<anonymous> (VM2222 app.js:50411)
    at __webpack_require__ (VM2222 app.js:20)
    at Object.<anonymous> (VM2222 app.js:25335)
    at __webpack_require__ (VM2222 app.js:20)
    at Object.defineProperty.value (VM2222 app.js:25325)
    at __webpack_require__ (VM2222 app.js:20)
    at module.exports (VM2222 app.js:63)

here is my app.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
import VueSweetalert2 from 'vue-sweetalert';
import VeeValidate from 'vee-validate';
import Icon from 'vue-awesome/components/Icon';
import store from './store.js';
import Auth from './Auth.js';

Vue.use(Auth);
Vue.use(VueSweetalert2);
Vue.use(VueRouter);
Vue.use(VeeValidate);
Vue.component('icon', Icon);


//masterViews

import Customers from './components/masterviews/customer.vue';
import NavBar from './components/NavBar/navbar.vue'
import MobileNavBar from './components/NavBar/mobilenavbar.vue'


// auth Views
import Login from './components/auth/loginpage.vue';
import Register from './components/auth/register.vue';

//DashBoard
import Dashboard from './components/dashboard.vue'


// Router 
const router = new VueRouter({
    routes : [

     //DashBoard
     { path: '/dashboard', component: Dashboard, name: 'dashboard', 
       meta: { isauth: true } },
  
     //master Views
     { path: '/customer', component: Customers, name:'customers', 
       meta:  { mustadmin: true , isauth: false } },

     // Auth
     { path: '/login', component: Login, name: 'login', 
       meta: { forVisitor: true } },

     { path: '/register', component: Register, name: 'register', 
       meta: { isauth: true } },

    ]
});


// navigation guard

router.beforeEach((to, from, next) =>{
     if(to.matched.some(record => record.meta.forVisitor)){
          if(Vue.auth.isAuthenticated())
          {
            next({
              path: '/dashboard'
            });
          } else {
            next();
          }
     } else if(to.matched.some(record => record.meta.isauth)){
          if( !Vue.auth.isAuthenticated())
          {
            next({
              path: '/login'
            });
          } else {
              next();
          }
     } else  {
        next();
     }
});


const app = new Vue({
    router,
    store,
    components: {
          navbar: NavBar,
          mobilenavbar: MobileNavBar,
          login: Login,
          dashboard: Dashboard,
     }
}).$mount('#app')

any idea how to fix this error ?

0 likes
4 replies
lostdreamer_nl's avatar

what happens when you comment out the line Vue.use(VueRouter); ?

Pathum's avatar

@lostdreamer_nl then nothings gonna show in browser, and returns this error,

Uncaught ReferenceError: VueRouter is not defined

lostdreamer_nl's avatar

Just checked some other pages, the only possible reasons I can find are:

  • Having app.js included more then once in your page (sometimes happens becaause of faulty frontend javascripts) (check during page load in F12 -> network tab to see if app.js is downloaded more then once when you reload a page)
  • wrong versions of Vue / VueRouter
  • using Vue.use(VueRouter) twice (which you dont)
Hadayat's avatar

This is happening because you added this script two times.

 <script src="{{ asset('js/app.js') }}" defer></script>

Please or to participate in this conversation.