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

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

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

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

JavaScript

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

解決済

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

alison
alison

総合スコア15

Vue.js

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

JavaScript

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

1回答

0評価

0クリップ

80閲覧

投稿2022/05/14 08:57

前提

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

実現したいこと

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

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

Vueのコンソール

console

INFO Starting development server... WARNING Compiled with 17 warnings 7:55:49 AM warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'onUnmounted' (imported as 'onUnmounted') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'onDeactivated' (imported as 'onDeactivated') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'onActivated' (imported as 'onActivated') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'getCurrentInstance' (imported as 'getCurrentInstance') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'computed' (imported as 'computed') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'unref' (imported as 'unref') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'watchEffect' (imported as 'watchEffect') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'defineComponent' (imported as 'defineComponent') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'h' (imported as 'h') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'provide' (imported as 'provide') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'ref' (imported as 'ref') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'shallowRef' (imported as 'shallowRef') was not found in 'vue' (possible exports: default) warning in ./node_modules/vue-router/dist/vue-router.esm-bundler.js export 'nextTick' (imported as 'nextTick') was not found in 'vue' (possible exports: default) warning in ./src/router.js export '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

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

該当のソースコード

App.vue

<template> <div id="app"> <router-view/> </div> </template> <script> import SignUp from './components/SignUp.vue' import SignIn from './components/SignIn.vue' export default { name: 'App', components: { SignUp, SignIn } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

main.js

import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')

router.js

import Vue from 'vue' import Router from 'vue-router' import SignUp from './components/SignUp.vue' import SignIn from './components/SignIn.vue' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/', name: 'signUp', component: SignUp }, { path: '/sign_in', name: 'signIn', component: SignIn }, ] })

試したこと

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

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

Dockerfile

FROM node:16.15.0 RUN mkdir /app WORKDIR /app RUN npm install -g @vue/cli

package.json

{ "name": "app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "axios": "^0.27.2", "core-js": "^3.8.3", "dotenv": "^16.0.1", "vue": "^2.6.14", "vue-router": "^4.0.15" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "vue-template-compiler": "^2.6.14" } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

JavaScript

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