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

Question

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'

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

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

Answer 1

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

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

Comments

[akakakakak]

ご回答いただきありがとうございます。

お教えいただいたものを試してみたものの上手くいきませんでした。