CODEWITHSUNDEEP
javascriptvue.jsvue-cli
Erik James Robles
Erik James Robles

Reputation: 899

Vuejs Failed to compile with 1 errors Relative module not found

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

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&

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-compiler": "^2.6.11"
  },

My relevant structure is as follows:

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

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.

Upvotes: 0

Views: 15548

Answers (2)

Kaumadie Kariyawasam
Kaumadie Kariyawasam

Reputation: 1456

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

Upvotes: 2

IVO GELOV
IVO GELOV

Reputation: 14259

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

Use the proper filename and the error will go away.

Upvotes: 3

Related Questions