vue-routerの導入で発生したエラーを解消したい

前提

vue-routerでルーティングしてページを切り替えたいのですが、ブラウザには何も表示されず、コンソールには下記のエラーが発生している状況です。

実現したいこと

vue-routerを使ってサインアップページ、サインインページを切り替えて表示したいです。

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

Vueのコンソール

console
1 INFO  Starting development server...
2
3
4 WARNING  Compiled with 17 warnings                                                                                            7:55:49 AM
5
6 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
7
8export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default)
9
10 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
11
12export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default)
13
14 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
15
16export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default)
17
18 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
19
20export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default)
21
22 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
23
24export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default)
25
26 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
27
28export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default)
29
30 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
31
32export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default)
33
34 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
35
36export 'watchEffect' (imported as 'watchEffect') was not found in 'vue' (possible exports: default)
37
38 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
39
40export 'defineComponent' (imported as 'defineComponent') was not found in 'vue' (possible exports: default)
41
42 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
43
44export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default)
45
46 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
47
48export 'h' (imported as 'h') was not found in 'vue' (possible exports: default)
49
50 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
51
52export 'provide' (imported as 'provide') was not found in 'vue' (possible exports: default)
53
54 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
55
56export 'ref' (imported as 'ref') was not found in 'vue' (possible exports: default)
57
58 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
59
60export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default)
61
62 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
63
64export 'shallowRef' (imported as 'shallowRef') was not found in 'vue' (possible exports: default)
65
66 warning  in ./node_modules/vue-router/dist/vue-router.esm-bundler.js
67
68export 'nextTick' (imported as 'nextTick') was not found in 'vue' (possible exports: default)
69
70 warning  in ./src/router.js
71
72export 'default' (imported as 'Router') was not found in 'vue-router' (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

ブラウザ(Chrome)のコンソール

console
1Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function
2    at eval (vue-router.esm-bundler.js?ec2d:2127:1)
3    at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js (chunk-vendors.js:529:1)
4    at __webpack_require__ (app.js:280:33)
5    at fn (app.js:526:21)
6    at eval (router.js:3:68)
7    at Module../src/router.js (app.js:230:1)
8    at __webpack_require__ (app.js:280:33)
9    at fn (app.js:526:21)
10    at eval (main.js:12:65)
11    at Module../src/main.js (app.js:219:1)

該当のソースコード

App.vue
1<template>
2  <div id="app">
3    <router-view/>
4  </div>
5</template>
6
7<script>
8import SignUp from './components/SignUp.vue'
9import SignIn from './components/SignIn.vue'
10
11export default {
12  name: 'App',
13  components: {
14    SignUp,
15    SignIn
16  }
17}
18</script>
19
20<style>
21#app {
22  font-family: Avenir, Helvetica, Arial, sans-serif;
23  -webkit-font-smoothing: antialiased;
24  -moz-osx-font-smoothing: grayscale;
25  text-align: center;
26  color: #2c3e50;
27  margin-top: 60px;
28}
29</style>

main.js
1import Vue from 'vue'
2import App from './App.vue'
3import router from './router'
4
5Vue.config.productionTip = false
6
7new Vue({
8  router,
9  render: h => h(App),
10}).$mount('#app')

router.js
1import Vue from 'vue'
2import Router from 'vue-router'
3import SignUp from './components/SignUp.vue'
4import SignIn from './components/SignIn.vue'
5
6Vue.use(Router)
7
8export default new Router({
9  mode: 'history',
10  routes: [
11    {
12      path: '/',
13      name: 'signUp',
14      component: SignUp
15    },
16    {
17      path: '/sign_in',
18      name: 'signIn',
19      component: SignIn
20    },
21  ]
22})

試したこと

一度vue-router@nextをインストールしてみましたが、特に変化はありませんでした。

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

Dockerfile
1FROM node:16.15.0
2
3RUN mkdir /app
4WORKDIR /app
5
6RUN npm install -g @vue/cli

package.json
1{
2  "name": "app",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "serve": "vue-cli-service serve",
7    "build": "vue-cli-service build",
8    "lint": "vue-cli-service lint"
9  },
10  "dependencies": {
11    "axios": "^0.27.2",
12    "core-js": "^3.8.3",
13    "dotenv": "^16.0.1",
14    "vue": "^2.6.14",
15    "vue-router": "^4.0.15"
16  },
17  "devDependencies": {
18    "@babel/core": "^7.12.16",
19    "@babel/eslint-parser": "^7.12.16",
20    "@vue/cli-plugin-babel": "~5.0.0",
21    "@vue/cli-plugin-eslint": "~5.0.0",
22    "@vue/cli-service": "~5.0.0",
23    "eslint": "^7.32.0",
24    "eslint-plugin-vue": "^8.0.3",
25    "vue-template-compiler": "^2.6.14"
26  }
27}

回答1件

自己解決

vue-routerのバージョンを下げることでエラーが発生しなくなりました。
package.json↓

diff
1{
2  "name": "app",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "serve": "vue-cli-service serve",
7    "build": "vue-cli-service build",
8    "lint": "vue-cli-service lint"
9  },
10  "dependencies": {
11    "axios": "^0.27.2",
12    "core-js": "^3.8.3",
13    "dotenv": "^16.0.1",
14    "vue": "^2.6.14",
15-   "vue-router": "^4.0.15"
16+   "vue-router": "^3.0"
17  },
18  "devDependencies": {
19    "@babel/core": "^7.12.16",
20    "@babel/eslint-parser": "^7.12.16",
21    "@vue/cli-plugin-babel": "~5.0.0",
22    "@vue/cli-plugin-eslint": "~5.0.0",
23    "@vue/cli-service": "~5.0.0",
24    "eslint": "^7.32.0",
25    "eslint-plugin-vue": "^8.0.3",
26    "vue-template-compiler": "^2.6.14"
27  }
28}