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;