CODEWITHSUNDEEP
vue.js
RandomDeveloper
RandomDeveloper

Reputation: 873

Dependency not found - Vue Js

I have recently added axios to a file called services.js so it's better organised. This file is on my root folder.

@/services.js

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: " server url here",
});

export const api = {
  get(endpoint) {
    return axiosInstance.get(endpoint);
  },
  post(endpoint, body) {
    return axiosInstance.post(endpoint, body);
  },
};

Then I have a component called Post.vue in my view folder:

<template>
  <section>
    <div>
      <ul></ul>
    </div>
  </section>
</template>

<script>
import { api } from "@/services.js";

export default {
  name: "Post",
  props: ["id"],
  data() {
    return {
      post: null,
    };
  },
  methods: {
    getPost() {
      api.get(`/post/${this.id}`).then(response => {
        this.post = response.data;
        console.log(this.post);
      });
    },
  },
  created() {
    this.getPost();
  },
};
</script>

<style></style>

I also have a router.ts file with all my routes:

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import Home from "../views/Home.vue";
import Podcasts from "../views/Podcasts.vue";
import Post from "../views/Post.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/podcasts",
      name: "podcasts",
      component: Podcasts,
    },
    {
      path: "/post/:id",
      name: "post",
      component: Post,
      props: true,
    },
  ],
});

export default router;

It's giving me a dependency error like @/services.js did not exist.

Unsure what's wrong at this stage.

Thanks a lot in advance for helping out

Upvotes: 0

Views: 2068

Answers (2)

Phil
Phil

Reputation: 164733

In a standard Vue CLI project, the @ symbol resolves to /src

If your file is in the root of your project try

import { api } from '@/../services'

But personally, I'd move it into src

You can check the Webpack configuration using

vue inspect

Look for the resolve.alias rules.

Upvotes: 1

lastr2d2
lastr2d2

Reputation: 3968

Check your webpack configuration, depends on the version of webpack you have, there should be an alias @ like this:

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      "@": path.resolve(__dirname) // check the path here
    }
  }
};

Or if you are using vue.config.js

configureWebpack: {
    name: name,
    resolve: {
      alias: {
        '@': path.resolve(__dirname)// check the path here
      }
    }
  },

Make sure the path is correctly set up. You mentioned you have another project working fine, which makes it a good reference.

Upvotes: 1

Related Questions