title: Vuejs Failed to compile with 1 errors Relative module not found
body: <p>Trying to compile after creating PostService.js and making api call. I get this error:</p>
  <pre><code>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&amp;type=script&amp;lang=js&amp;
  </code></pre>
  <p>Here is a list of my dev dependencies in package.json:</p>
  <pre><code>&quot;devDependencies&quot;: {
      &quot;@vue/cli-plugin-babel&quot;: &quot;^4.4.6&quot;,
      &quot;@vue/cli-plugin-eslint&quot;: &quot;^4.4.6&quot;,
      &quot;@vue/cli-service&quot;: &quot;^4.4.6&quot;,
      &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
      &quot;eslint&quot;: &quot;^7.5.0&quot;,
      &quot;eslint-plugin-vue&quot;: &quot;^6.2.2&quot;,
      &quot;vue-style-loader&quot;: &quot;^4.1.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.6.11&quot;
    },
  </code></pre>
  <p>My relevant structure is as follows:</p>
  <pre><code>src
      assets
      components
        Navbar.vue
        PostForm.vue
      views
        About.vue
        Home.vue
      App.vue
      main.js
      PostService.js
      router.js
  </code></pre>
  <p>App.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;Navbar&gt;&lt;/Navbar&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Navbar from &quot;./components/Navbar&quot;;
  import &quot;../node_modules/materialize-css/dist/css/materialize.min.css&quot;;
  import &quot;../node_modules/materialize-css/dist/js/materialize.min.js&quot;;
  
  export default {
    name: &quot;App&quot;,
    components: {
      Navbar,
    },
  };
  &lt;/script&gt;
  
  &lt;style&gt;&lt;/style&gt;
  </code></pre>
  <p>Home.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col s6&quot;&gt;
          &lt;!-- form --&gt;
          &lt;PostForm /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div
            class=&quot;col s6&quot;
            v-for=&quot;(post, index) in posts&quot;
            v-bind:item=&quot;post&quot;
            :index=&quot;index&quot;
            :key=&quot;post.id&quot;
          &gt;
            &lt;div class=&quot;card&quot;&gt;
              &lt;div class=&quot;card-content&quot;&gt;
                &lt;p class=&quot;card-title&quot;&gt;{{ post.title }}&lt;/p&gt;
                &lt;p class=&quot;timestamp&quot;&gt;{{ post.createdAt }}&lt;/p&gt;
                &lt;p&gt;{{ post.body }}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class=&quot;card-action&quot;&gt;
                &lt;a href=&quot;#&quot;&gt;Edit&lt;/a&gt;
                &lt;a href=&quot;#&quot; class=&quot;delete-btn&quot;&gt;Delete&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import PostService from &quot;../PostService&quot;;
  import PostForm from &quot;../components/PostFrom.vue&quot;;
  const postService = new PostService();
  
  export default {
    name: &quot;Home&quot;,
    components: {
      PostForm,
    },
    data() {
      return {
        posts: [],
      };
    },
    created() {
      postService
        .getAllPosts()
        .then((res) =&gt; {
          this.posts = res.data;
          console.log(this.posts);
        })
        .catch((err) =&gt; console.error(err));
    },
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .card .card-content .card-title {
    margin-bottom: 0;
  }
  
  .card .card-content p.timestamp {
    color: #999;
    margin-bottom: 10px;
  }
  
  .delete-btn {
    color: red !important;
  }
  &lt;/style&gt;
  </code></pre>
  <p>PostForm.vue</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;form v-if=&quot;!loading&quot; class=&quot;form&quot; v-on:submit=&quot;onSubmit&quot;&gt;
        &lt;div class=&quot;input-field&quot;&gt;
          &lt;label for=&quot;title&quot;&gt;Title&lt;/label&gt;
          &lt;input type=&quot;text&quot; name=&quot;title&quot; v-model=&quot;title&quot; class=&quot;validate&quot; /&gt;
          &lt;span class=&quot;helper-text&quot; data-error=&quot;Title must not be empty&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;input-field&quot;&gt;
          &lt;label for=&quot;body&quot;&gt;Body&lt;/label&gt;
          &lt;input type=&quot;text&quot; name=&quot;body&quot; v-model=&quot;body&quot; class=&quot;validate&quot; /&gt;
          &lt;span class=&quot;helper-text&quot; data-error=&quot;Body must not be empty&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;button type=&quot;submit&quot; class=&quot;waves-effect waves-light btn&quot;&gt;Add&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: &quot;PostForm&quot;,
    data() {
      return {
        loading: false,
        title: &quot;&quot;,
        body: &quot;&quot;,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>PostService.js</p>
  <pre><code>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`);
      }
  }
  </code></pre>
  <p>main.js</p>
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  
  import router from './router';
  
  Vue.config.productionTip = false
  
  new Vue({
    router,
    render: h =&gt; h(App),
  }).$mount('#app')
  </code></pre>
  <p>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.</p>