Vue3 "export 'createWebHistory, createRouter' was not found in 'vue-router'

Question

I'm creating a Vue3 application and after I added the router, my first page is loading but it's completely blank.

I'm receiving the following

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

In console:

Warning in ./src/router/index.js "export 'createRouter' was not found in 'vue-router'

Warning in ./src/router/index.js "export 'createWebHistory' was not found in 'vue-router'

router -> index.js

import { createWebHistory, createRouter } from "vue-router";
...

const routes = [{
        path: "/user/create",
        name: "createUser",
        component: createUser,
    },
    {
        path: "/users",
        name: "listUser",
        component: listUser,
        meta: { requiresAuth: true }
    },
    {
        path: "/user/show/:id",
        name: "showUser",
        component: showUser,
        meta: { requiresAuth: true }
    },
    {
        path: "/user/update/:id",
        name: "updateUser",
        component: updateUser,
    },
    {
        path: "/login",
        name: "login",
        component: Login
    },
    {
        path: "/register",
        name: "register",
        component: Register
    },
    {
        path: "/users/bearer",
        name: "bearer",
        component: bearer,
        meta: { requiresAuth: true }
    }

]

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const isAuthenticated = firebase.auth().currentUser;
    console.log("isauthenticated", isAuthenticated);
    if (requiresAuth && !isAuthenticated) {
        next("/login");
    } else {
        next();
    }
});

export default router;

Answer 1

Found the answer to this here:

Stackoverflow question

You need to install the router via npm

npm install vue-router@next --save