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!!