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

Tips for storing HTML form data in a local JSON file without the need for PHP or Node.js dependencies

The declaration for "Control" is not present, possibly being restricted by its protection level

Increasing the top padding of a resized iframe thanks to iframe-resizer

Obtaining an XML element within an XSLT transformation

Creating personalized hooks that rely on React query requests

Prevent AJAX request while in progress?

tips on assigning a unique ID to an item in a firebase database collection

Advanced jQuery Autocomplete with Nested Ajax Requests

What is the best way to iterate through an array of images and upload them individually, ensuring that they do not have duplicate names

What causes the updated value to be appended to an array when using the spread operator to modify an existing property's value?

The components for my children are not being displayed within the Drawer component in Material UI and React

Create a JavaScript function that adds cells to a table, each containing an input field and a corresponding

Tips for creating animations with JavaScript on a webpage

Exploring the potential of Angular JS and gapi in building a seamless routed

Transform pixel padding into percentage ratios

Looking to encode/decode a JSON response in order to transfer it to a different webpage

Utilizing React Hook Form for Interactive Slider and User Input Controls

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

Passing the unique identifier of a record in NextJS to a function that triggers a modal display

Vue - Syntax error: Unexpected token, expecting "}."