前提
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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。