Vuejs - Uncaught TypeError: Cannot redefine property: $router

javascript vue.js vuejs2 vue-router

12,309

Solution 1

This is due to the following code in vue-router

if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter);
}

which is really only present for when you're including files in <script> blocks (ie, no build system).

Remove any <script> elements relating to Vue or related components; you don't need them when using Webpack.

Solution 2

Solved!

In my index.html file, I had imported vue again:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Meko Deng</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> -->
</body>
</html>

Commenting that out did the trick!

Solution 3

Looks like you used Webpack and had forgotten set

externals: {
  Vue: 'vue'
}

In this case you had initialized vue and vue-router twice in the external CND and in the webpacks's lib.

12,309

Author by

Meko Deng

Updated on July 06, 2022

Comments

Meko Deng almost 2 years
I'm relatively new to Vuejs and I’ve been stuck on with the following error for a while now: (Appears when page loads)

Uncaught TypeError: Cannot redefine property: $router
  at Function.defineProperty ()
  at Function.install (VM2179 vue-router.esm.js:526)
  at Function.Vue.use (vue.js:4738)
  at eval (VM2179 vue-router.esm.js:2447)
  at Object../node_modules/vue-router/dist/vue-router.esm.js (VM2105 app.js:1615)
  at __webpack_require__ (VM2105 app.js:712)
  at fn (VM2105 app.js:95)
  at eval (VM2178 index.js:3)
  at Object../src/router/index.js (VM2105 app.js:2415)
  at __webpack_require__ (VM2105 app.js:712)

This issue doesn't seem to be affecting the usability of the webapp and I’m pretty sure I’m not declaring Vue.use(Router) more than once…

Here is my index.js file: (in src/router)
```
import Vue from 'vue'
import Router from 'vue-router'
import Blog from '../components/Blog.vue'
import BlogPost from '../components/BlogPost.vue'

Vue.use(Router)
Vue.config.silent = true

export default new Router({
  routes: [
    {
      path: '/blog',
      name: 'Blog',
      component: Blog
    },
    {
      path: '/blog/:slug',
      name: 'Blog-post',
      component: BlogPost
    }
  ]
})
```
app.ts: (in src, main entry point)
```
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/simple_store'
import '../assets/app.css'
import './assets/main_logo.css'
import './assets/pages/page_header_animation.css'

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
```
Please help! Thank you!!
Phil over 5 years

Forget commenting it out, just delete the line :D
Meko Deng over 5 years

Yep Yep~~ Thanks again!!
AndersRehn about 5 years

Thank you! Wow just amazing, my knowledge about webpack's externals and what it does is really limited thus i've never quite understood why I got an error related to this single setting.
trevster344 over 3 years

What about when you're exposing vue to the window for the sake of allowing external scripts to use Vue?
Sunil Kumar about 2 years

When I remove this <script src="{{ asset('js/app.js') }}" defer></script> from app.blade.php the login page stops showing error, but other pages show blank, any idea?
HadiNiazi about 2 years

Vue.use(VueRouter); check that router is define double time?
Sunil Kumar about 2 years

In my case it was an unclosed div at login.blade.php. Thanks for helping.