質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5648閲覧

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

addyson

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/05/14 08:57

前提

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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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}

投稿2022/05/14 13:43

編集2022/05/15 00:00
addyson

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問