The property 'get' cannot be accessed because the axios module of vue__WEBPACK_IMPORTED_MODULE_0__ is undefined

Question

The property 'get' cannot be accessed because the axios module of vue__WEBPACK_IMPORTED_MODULE_0__ is undefined

Having some trouble with Vue and Axios - encountering the following error message:

[Vue warn]: Error in created hook: "TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined"

Here's the code snippet:

Api.service.js

import Vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import JwtService from "./jwt.service";

const ApiService = {
    init() {
        Vue.use(VueAxios, axios);
        axios.defaults.baseURL = "http://hyper.test/api";
    },
}

BannerDataService.js:

import ApiService from "../api.service";

class BannerDataService {
    constructor() {
        
    }

    all() {
        return ApiService.get('site/banners')
    }

    get(id) {
        return ApiService.get(`site/banners/${id}`)
    }
}

export default new BannerDataService();

Index.vue:

getBanners() {
            BannerDataService.all().then(response => {
                console.debug(response)
            }).catch(err => {
                console.debug(err)
            })
        }

Error message in console:

[Vue warn]: Error in created hook: "TypeError: can't access property "get", vue__WEBPACK_IMPORTED_MODULE_0__.default.axios is undefined"

javascript vue.js axios

Answer 1

Answer №1

For the file Api.service.js, it is recommended to create an instance of axios directly without relying on it as a plugin :

import axios from 'axios';

const ApiService = () =>
  axios.create({
    baseURL: 'yourbaseUrl',
    withCredentials: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
   
  });

export default ApiService ;

In the BannerDataService.js file, make sure to call ApiService as a function using parentheses like ApiService().get(...)

import ApiService from "../api.service";

class BannerDataService {
    constructor() {
        // ApiService.setHeader();
        // ApiService.adminScope();
    }

    all() {
        return ApiService().get('site/banners')
    }

    get(id) {
        return ApiService().get(`site/banners/${id}`)
    }
}

export default new BannerDataService();

This approach mentioned above is independent of any specific UI library or framework.

Answer 2

For the file Api.service.js, it is recommended to create an instance of axios directly without relying on it as a plugin :

import axios from 'axios';

const ApiService = () =>
  axios.create({
    baseURL: 'yourbaseUrl',
    withCredentials: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
   
  });

export default ApiService ;

In the BannerDataService.js file, make sure to call ApiService as a function using parentheses like ApiService().get(...)

import ApiService from "../api.service";

class BannerDataService {
    constructor() {
        // ApiService.setHeader();
        // ApiService.adminScope();
    }

    all() {
        return ApiService().get('site/banners')
    }

    get(id) {
        return ApiService().get(`site/banners/${id}`)
    }
}

export default new BannerDataService();

This approach mentioned above is independent of any specific UI library or framework.

The property 'get' cannot be accessed because the axios module of vue__WEBPACK_IMPORTED_MODULE_0__ is undefined

Answer №1

Similar questions

Venom Bot encounters issue with sending files, displaying "Error processing files" message

Testing nested mocked functions can be achieved by setting up the necessary mocks

Ways to enhance the type definitions for a built-in HTML element in Vue.js?

Can the `lang` attribute be used in a `style` tag to specify the CSS preprocessor language for VueJS? Are there any disadvantages to using this method?

Utilizing jQuery to eliminate a script function from an external webpage

Unusual behavior being exhibited by the background in an HTML5 canvas

Automated tool for generating random JSON objects

Replicate form element

"Learn how to seamlessly submit a form and display the results without the need to refresh the

Exploring the intricacies of initializing a JavaScript function

Creating a predictive text feature using AngularJS and jQuery

Exploring test suite pathways while utilizing ArcGIS JSAPI as an alternative loader within the Intern framework

Steps for instructing Google Maps to identify the location of a provided Google Maps URL

The Ajax call is failing to trigger the success function

Tips on altering the input content in React Js?

Discovering an element within an HTML response using jQuery AJAX

Switch the custom audio control button on and off within a v-for loop

using jquery to retrieve the current time and compare it

Unable to showcase the chosen option utilizing select2

What could be causing my for loop to not function properly within the ngOnInit lifecycle hook?