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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

1回答

1274閲覧

[Vue.js]コンポーネントをimportしているはずなのに認識されません[Nuxt.js]

akakakakak

総合スコア0

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/12/15 02:32

編集2020/12/15 07:52

Nuxt.js初学者で技術書やネット記事を参考にアプリを作成しています。

作成中のアプリをローカルで開こうとしたところ

This dependency was not found: friendly-errors 10:23:47 friendly-errors 10:23:47 * ~/components/TheHeader.vue in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./.nuxt/layouts/default.vue?vue&type=script&lang=js& friendly-errors 10:23:47 To install it, you can run: npm install --save ~/components/TheHeader.vue friendly-errors 10:23:47 i Waiting for file changes 10:23:47 i Memory usage: 140 MB (RSS: 208 MB) 10:23:47 i Listening on: http://localhost:3000/

というエラーがコマンドで出てきてアプリが開けないという状況に陥っています。

該当のソースコード

**.nuxt/layouts/default.vue** <template> <div> <TheHeader /> <div class="wrapper"> <nuxt class="container" /> </div> </div> </template> <script> import TheHeader from '~/components/TheHeader.vue' export default { components: { TheHeader } } </script>
**app/components/TheHeader.vue** <template> <el-menu mode="horizontal" :router="true"> <el-menu-item index="1" style="pointer-events:none;"> Football-App </el-menu-item> <el-menu-item index="2" :route="{ path: '/posts/' }"> 投稿一覧 </el-menu-item> <no-ssr> <el-menu-item index="4" style="float: right;" :route="{ path: `/users/${user.id}` }" v-if="user"> <span>{{user.id}}</span> </el-menu-item> <el-menu-item index="4" style="float: right;" :route="{ path: '/' }" v-else> <span>ログイン</span> </el-menu-item> </no-ssr> <el-menu-item index="5" style="float: right" :route="{ path: '/posts/new' }"> 新規投稿 </el-menu-item> </el-menu> </template> <script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(['user']) } } </script>
**app/pages/index.vue** <template> <section class="container"> <div v-if="isWaiting"> <p>読み込み中</p> </div> <div v-else> <div v-if="!isLogin"> <div> <p> <input v-model="email" type="text" placeholder="email"> </p> <p> <input v-model="password" type="password" placeholder="password"> </p> <p> <input id="checkbox" v-model="register" type="checkbox"> <label for="checkbox">新規登録</label> </p> <button @click="passwordLogin">{{ register ? '新規登録' : 'ログイン' }}</button> <p>{{ errorMessage }}</p> </div> </div> <div v-else> <p>{{ user.email }}でログイン中</p> <button @click="logOut">ログアウト</button> </div> </div> </section> </template> <script> import moment from '~/plugins/moment' import { mapGetters } from 'vuex' export default { layout: 'default', asyncData () { return { register: false, isWaiting: true, isLogin: false, user: [], email: '', password: '', errorMessage: '' } }, mounted: function () { firebase.auth().onAuthStateChanged(user => { this.isWaiting = false this.errorMessage = '' if (user) { this.isLogin = true this.user = user } else { this.isLogin = false this.user = [] }; }) }, methods: { passwordLogin () { const email = this.email const password = this.password if (this.register) { firebase.auth().createUserWithEmailAndPassword(email, password).catch(function (error) { const errorMessage = error.message this.errorMessage = errorMessage }.bind(this)) } else { firebase.auth().signInWithEmailAndPassword(email, password).catch(function (error) { const errorMessage = error.message this.errorMessage = errorMessage }.bind(this)) } }, logOut () { firebase.auth().signOut() } }, layout: 'default', } </script>

試したこと

このエラーについて調べてみたところ、やはりコンポーネントを認識できないときにおこるエラーのようでimportのファイル名の誤字脱字で解決という事例が多いようでそのあたりは確認してみたのですが見当たりませんでした。

また

yarn upgrade
yarn upgrade --latest

をしてみるという方法も試してみたのですが上手くいきませんでした。

・追記

import TheHeader from '~/components/TheHeader.vue'

import TheHeader from './components/TheHeader.vue'

に変えてみましたが何も変化は起きませんでした

この問題の解決法についてお分かりの方がいらっしゃいましたらアドバイスよろしくお願いします。

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

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

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

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

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

guest

回答1

0

参照先のファイルに.. や@をつけるのはやってみましたか?

Vue.js

1import TheHeader from '../components/TheHeader.vue' 2import TheHeader from '@/components/TheHeader.vue'

投稿2020/12/19 20:26

takochan1192

総合スコア100

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

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

akakakakak

2020/12/20 23:58

ご回答いただきありがとうございます。 お教えいただいたものを試してみたものの上手くいきませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問