Trying to pile after creating PostService.js and making api call. I get this error:

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

* ../ponents/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&

Here is a list of my dev dependencies in 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-piler": "^2.6.11"
  },

My relevant structure is as follows:

src
    assets
    ponents
      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 "./ponents/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",
  ponents: {
    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 "../ponents/PostFrom.vue";
const postService = new PostService();

export default {
  name: "Home",
  ponents: {
    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 = '';

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

I have tried removing the node_modules folder and reinstalling it. I have also tried removing the contents of node_modules/.cache/babel-loader and node_modules/.cache/vue-loader. I also ran updates in npm - upgrades etc. So far, nothing I have tried worked. I am running Vue version 4.1.2 and node version 12.14.0 Any help on this would be greatly appreciated. Thank you in advance. Cheers.

Trying to pile after creating PostService.js and making api call. I get this error:

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

* ../ponents/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&

Here is a list of my dev dependencies in 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-piler": "^2.6.11"
  },

My relevant structure is as follows:

src
    assets
    ponents
      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 "./ponents/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",
  ponents: {
    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 "../ponents/PostFrom.vue";
const postService = new PostService();

export default {
  name: "Home",
  ponents: {
    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./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')

I have tried removing the node_modules folder and reinstalling it. I have also tried removing the contents of node_modules/.cache/babel-loader and node_modules/.cache/vue-loader. I also ran updates in npm - upgrades etc. So far, nothing I have tried worked. I am running Vue version 4.1.2 and node version 12.14.0 Any help on this would be greatly appreciated. Thank you in advance. Cheers.

• javascript
• vue.js
• vue-cli

2 Answers 2

You have a spelling mistake in your code. The filename of the ponent is PostForm.vue but in Home.vue you are trying to import the ponent from PostFrom.vue.

Use the proper filename and the error will go away.

This error usually happens when I rename a ponent and forget to change the file name