Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"

Question

Created a simple Vue project using the CLI:

vue create my-project

Wanted to add two pages, so installed the latest version of vue-router (which is currently v3.4.8) and followed the vue mastery tutorial for routing.

This is what my router.js file looks like:

import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
  ]
})

export default router

And of course, this is what my main.js file looks like:

import { createApp } from 'vue'
import router from './router'

createApp({
  template: `
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/create'>Create</router-link>
  </div>
  `
})
.use(router)
.mount('#app')

Both of the Home and About components don't really have much in them, this is what they look like:

<template>
  <div>TODO: Home</div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

Anyway, all of this to say that I am getting the following error on:

Uncaught TypeError: Object(...) is not a function

at eval (router.js?41cb:5)

This is specifically on createRouter

Have I done something wrong?

Edit: as Boussadjra Brahim pointed out, originally createWebHistory was just being passed in without being a function call. I've since updated the code to include this.

Interestingly enough, once that was done, the error is not happening upon it's call.

Solution 1

This issue is caused when you install Vue router 3 with Vue 3 so you should uninstall the current version :

npm uninstall vue-router --save

and install the new one by :

npm i vue-router@next --save

Example

Solution 2

For vue3 you should install the @4 package with the following command:

npm install vue-router@4

Please consult the following migration guide if you're having problems: Migrating from Vue 2

Comments

[Dalibor]

I have a same problem, but this didn't help me :( Vue version: 3.0.2, "vue-router": "^4.0.0-0", "@vue/cli-plugin-router": "^4.5.8"

[Boussadjra Brahim]

could you enrich this example? in order to debug it

[Dalibor]

Hmm.. there I get some CORS issues? (I just routing within the site). Here it is: codesandbox.io/s/friendly-colden-mtti2 , I added List and Detail

[Dalibor]

It doesn't work for me. If you click here any link in "List" page, I get CORS error in FF, or no errors in Chrome, but dead link. In my local system, I have same error as the OP in title of this page. I tried what you suggested, still nothing.

[Sky Pan]

It work on me. my package.json "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vue-router": "^4.0.12", "vuex": "^4.0.2" },

[Aleksandar]

Keep up the good work