CODEWITHSUNDEEP
javascriptexpressvue.js
Ashutosh Mane
Ashutosh Mane

Reputation: 11

This relative module was not found:

this is my code block from a component, im fairly new (2 days with the vue.js and I came across a medium article about MEVN ARCH. 

 <template>
      <div class="post">
        <h1>post</h1>
        <div >
            <!-- <p v-for="post in posts">
                <span><b>{{post.title}}</b></span>
                <span><b>{{post.description}}</b></span>
            </p> -->
        </div>

      </div>
    </template>

    <script>
    import  postService from "@/services/postservice";
    export default {
      name: 'posts',
      data () {
        return {  
          posts: []
        }
      },

      mounted () {
        this.getPosts()
      },
      methods: {
        async getPosts () {
          const response = await postService.fetchPost()
          this.posts = response.data
        }
      }
    }
    </script>

    <style scoped>

    </style>

This is the terminal output :

this is the terminal output

Upvotes: 0

Views: 3562

Answers (1)

Stephan-v
Stephan-v

Reputation: 20297

If you use this syntax:

"@/services/postservice"

You must be sure that your Webpack configuration actually contains an alias like this:

resolve: {
    alias: {
        '@': 'resources/assets/js(this is your custom path, dont just copy this)'
    }
}

This tells Webpack what @ actually resolves to. Because by default it does not mean anything. Only when you provide the Webpack configuration with this alias will this actually resolve to a complete path.

I am guessing that this is the problem here.

Upvotes: 1

Related Questions