Vuejs Не удалось скомпилировать с 1 ошибкой Относительный модуль не найден

Попытка скомпилировать после создания PostService.js и вызова API. Я получаю такую ​​ошибку:

ERROR  Failed to compile with 1 errors                                                       12:54:44 AM
This relative module was not found:

* ../components/PostFrom.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&

Вот список моих зависимостей разработчиков в package.json:

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.6",
    "@vue/cli-plugin-eslint": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11"
  },

Моя соответствующая структура выглядит следующим образом:

src
    assets
    components
      Navbar.vue
      PostForm.vue
    views
      About.vue
      Home.vue
    App.vue
    main.js
    PostService.js
    router.js

App.vue

<template>
  <div>
    <Navbar></Navbar>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Navbar from "./components/Navbar";
import "../node_modules/materialize-css/dist/css/materialize.min.css";
import "../node_modules/materialize-css/dist/js/materialize.min.js";

export default {
  name: "App",
  components: {
    Navbar,
  },
};
</script>

<style></style>

Home.vue

<template>
  <div>
    <div class="row">
      <div class="col s6">
        <!-- form -->
        <PostForm />
      </div>
    </div>
    <div>
      <div class="row">
        <div
          class="col s6"
          v-for="(post, index) in posts"
          v-bind:item="post"
          :index="index"
          :key="post.id"
        >
          <div class="card">
            <div class="card-content">
              <p class="card-title">{{ post.title }}</p>
              <p class="timestamp">{{ post.createdAt }}</p>
              <p>{{ post.body }}</p>
            </div>
            <div class="card-action">
              <a href="#">Edit</a>
              <a href="#" class="delete-btn">Delete</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PostService from "../PostService";
import PostForm from "../components/PostFrom.vue";
const postService = new PostService();

export default {
  name: "Home",
  components: {
    PostForm,
  },
  data() {
    return {
      posts: [],
    };
  },
  created() {
    postService
      .getAllPosts()
      .then((res) => {
        this.posts = res.data;
        console.log(this.posts);
      })
      .catch((err) => console.error(err));
  },
};
</script>

<style scoped>
.card .card-content .card-title {
  margin-bottom: 0;
}

.card .card-content p.timestamp {
  color: #999;
  margin-bottom: 10px;
}

.delete-btn {
  color: red !important;
}
</style>

PostForm.vue

<template>
  <div>
    <form v-if="!loading" class="form" v-on:submit="onSubmit">
      <div class="input-field">
        <label for="title">Title</label>
        <input type="text" name="title" v-model="title" class="validate" />
        <span class="helper-text" data-error="Title must not be empty"></span>
      </div>
      <div class="input-field">
        <label for="body">Body</label>
        <input type="text" name="body" v-model="body" class="validate" />
        <span class="helper-text" data-error="Body must not be empty"></span>
      </div>
      <button type="submit" class="waves-effect waves-light btn">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "PostForm",
  data() {
    return {
      loading: false,
      title: "",
      body: "",
    };
  },
};
</script>

PostService.js

import axios from 'axios';

const apiBaseUrl = 'https://ndb99xkpdk.execute-api.eu-west-2.amazonaws.com/dev';

export default class PostService {
    getAllPosts() {
        return axios.get(`${apiBaseUrl}/posts`);
    }
}

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')

Я попытался удалить папку node_modules и переустановить ее. Я также попытался удалить содержимое node_modules / .cache / babel-loader и node_modules / .cache / vue-loader. Я также запускал обновления в npm - обновления и т. Д. Пока ничего из того, что я пробовал, не работало. Я использую Vue версии 4.1.2 и версию узла 12.14.0. Любая помощь по этому поводу будет принята с благодарностью. Заранее спасибо. Ваше здоровье.