Failed to compile.のエラー内容を解決したい。

Question

前提・実現したいこと

VueRouterを使ってコンポーネントを切り替えたい。

発生している問題・エラーメッセージ

Failed to compile.

./src/router.js
Module not found: Error: Can't resolve './components/ConsulationFormPage' in '/Users/yohei/Documents/git/kadai/vue-questionnaire/src'

該当のソースコード

↓main.jsの中身です。

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

createApp(App).use(router).mount('#app')

↓router.jsの中身です。

import Vue from "vue";
import VueRouter from "vue-router";
import Basicinfomation from "./components/Basicinfomation";
import QuestionPage from "./components/QuestionPage";
import ConsulationFormPage from "./components/ConsulationFormPage";

Vue.use(VueRouter);

export default new VueRouter({
    routes: [
        { path: "/", component: Basicinfomation },
        { path: "/question", component: QuestionPage },
        { path: "/consulation", component: ConsulationFormPage }
    ]
});

試したこと

試しにVueRouterのファイルをコメントアウトしたところエラー画面は出なくなったのですが、画面が真っ白になり何も表示されなくなりました。

補足情報（FW/ツールのバージョンなど）

vueのバージョンは@vue/cli 4.5.9です。
Vue3を使っています。

Vue3以降Vueオブジェクトは使用されないとのことでrouter.jsを以下のように書き換えてみましたが状況は変わらずでした。

import { createApp } from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import BasicInfomation from '/Users/fukutomeyouhei/Documents/git/MENTA-kadai/vue-questionnaire/src/components/BasicInfomation.vue';
import QuestionsPage from '/Users/fukutomeyouhei/Documents/git/MENTA-kadai/vue-questionnaire/src/components/QuestionsPage.vue';
import ConsultationFormPage from '/Users/fukutomeyouhei/Documents/git/MENTA-kadai/vue-questionnaire/src/components/ ConsultationFormPage.vue';

const app = createApp(App);
app.use(VueRouter);

export default new VueRouter({
    routes: [
        { path: '/', component: BasicInfomation },
        { path: '/question', component: QuestionsPage },
        { path: '/consulation', component: ConsultationFormPage }
    ]
});

importする時のパスを相対パスから絶対パスに変えてみたところエラー画面は出なくなったのですが、
コンソールを確認したところこのようなエラーが表示されていました。

###エラー内容

Uncaught TypeError: Object.defineProperty called on non-object
at Function.defineProperty (<anonymous>)
at Function.install (vue-router.esm.js?8c4f:1283)
at Object.use (runtime-core.esm-bundler.js?5c40:2948)
at eval (router.js?41cb:9)
at Module../src/router.js (app.js:1303)
at webpack_require (app.js:849)
at fn (app.js:151)
at eval (main.js:12)
at Module../src/main.js (app.js:1291)
at webpack_require (app.js:849)

ご教授いただければ幸いです????‍♂️