Cannot call `post` on WEBPACK_IMPORTED_MODULE_0__ -> Use Axios to create a request and then post

I am in the process of developing a versatile API service using axios.

api.js

import axios from 'axios'

export default () => {
    return axios.create({
        baseURL: `${window.location.origin}/`
    })  
} 

authenticationService.js

import api from '@/services/api.js'

export default {
    login(credentials) {
        return api.post('...', credentials)
    }
  }   

vuex action

import authenticationService from '@/services/authentication/authenticationService'

async login({commit}, credentials) {
    try {
        let response = await authenticationService.login(credentials)
        console.log(response)
    } catch(er) {
        console.log(er)
    }
})

Error Encountered*

_services_api__WEBPACK_IMPORTED_MODULE_0__.post is not a function
    at Object.login (authenticationService.js:6)

Upon further examination:

login: function login(credentials) {
    return _services_api__WEBPACK_IMPORTED_MODULE_0__["post"]('...', credentials);
}

It seems like there may be an issue with importing the api function correctly which initializes axios?

Answer №1

Make sure to call the arrow function when exporting it.

import api from '@/services/api.js'

export default {
    login(credentials) {
        return api().post('...', credentials)
    }
  }   

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for placing order import styles css module as the first line in eslint-plugin-import configuration

I'm currently setting up ESLint for my project, using `eslint-plugin-import` to organize module import order. However, I have a specific case with a style CSS module that I want to place at the beginning of the import list. How can I configure ESLint ...

Tips for preventing text wrapping in off-canvas design

Seeking advice for my Web Application prototype - looking to prevent text wrapping in off-canvas menu paragraphs using CSS or JS. New to building this type of menu, I used an example from W3Schools to achieve the current design. <!DOCTYPE html> ...

Adjusting the position of a stationary element when the page is unresponsive and scrolling

Managing a large web page with extensive JavaScript functionality can be challenging, especially when dealing with fixed position elements that update based on user scroll behavior. A common issue that arises is the noticeable jumping of these elements whe ...

The environmental variables stored in the .env file are showing up as undefined in Next.js 13

I am having trouble accessing the environment variables stored in my .env.local file within the utils folder located in the root directory. When I try to console log them, they show as undefined. console.log({ clientId: process.env.GOOGLE_ID, clien ...

Performing a password-protected JavaScript Ajax request that includes special characters

Within my JavaScript page, I have implemented an Ajax call shown in the code snippet below. The PHP page resides within a corporate intranet that demands domain authentication (without basic auth). To extract the username (u) and password (p), I am using j ...

A guide to dynamically display input fields according to the selected mat-radio button in Angular Material

I am currently utilizing angular material version 9.2.4 Within my project, I am implementing the angular material mat radio button with an input field. Each payment method will have its own corresponding input field. When the 'Cash' option is se ...

How can we show pictures when a user clicks?

After creating a model for displaying images in a modal when clicked by the user, I encountered an issue. Whenever I try to access the images from the gallery within the modal content, it only displays a blank popup. I want the pictures from the image gall ...

What is the best way to update the state of object.item[n] that is nested within an array, which in turn is nested within

A unique data structure is set up in the following way: const library = [ { procedureName:'Build Foundations', id:1, tasks:[ { taskName:'dig at least 1m deep', isCompleted:false, procedureId:1 }, ...

Designing a credit card entry field. What could be the reason for the absence of dashes in the credit card form for 4-digit

I'm in the process of designing a form for credit card validation. The input field should always consist of a maximum of 19 digits, with 4 numeric digits separated by a dash. I have managed to set it up so that entering the numbers manually works fine ...

Using Javascript within HTML: A guide on when to utilize semi-colons and when to implement the return false statement

Exploring the use of JavaScript attributes within HTML elements: <input type="button" onclick="somceFunc()" /> <input type="button" onclick="somceFunc();" /> <input type="button" onclick="somceFunc(); return false;" /> Debating whether ...

Enhancing Numerical Visuals: Tips for Optimizing Visualization of Proximate Numbers using

In my chart, I noticed that the values are very close together such as: Value A -> 3.7747199435 Value B -> 3.775531821 Value C -> 3.7754975674 Value D -> 3.8358619466 Value E -> 3.8856710034 and as a result, the visualization shows minima ...

Create a collection of items in Laravel / PHP

Currently, I am utilizing Laravel for the purpose of uploading several products. Users have the option to select a quantity for each product. However, I am looking for a way to upload these products in a series while also displaying their names. I have e ...

Error: Attempting to access the 'length' property of an undefined variable in a Google Sheets document

Could someone help me troubleshoot this issue I'm encountering in Google Sheets Apps Script: "TypeError: Cannot read properties of undefined (reading 'length')"? I found this script on YouTube and tried to implement it. Below is the code sn ...

How can I add a string before a hashtag(#) in AngularJS URLs?

Can we add a prefix to the # symbol in angular.js URLs? For instance: let's say we have a site: http://example.com/ then when I click on the CSharp page, it redirects to http://example.com/#/csharp when I click on the AngularJS page, it redi ...

Error encountered: A missing semicolon was detected before a statement while executing code within a for

Although this question may have already been asked, I am struggling to understand why it is not working as expected. I simply want to increment the markers array within a for loop and then add each marker to the vector source using vectorSource.addFeature ...

The Query.formatError message indicates that there is an issue with the 'users.email' column in the where clause of the database query

I'm having some trouble with a piece of code. Here's my signup function : exports.signup = (req, res) => { // Adding User to Database console.log("Processing func -> SignUp"); User.create({ name: req.body.name, username: req.body. ...

Encountering an undefined json array when making an AJAX request

There have been numerous questions on this topic, but none of the specific solutions seemed to apply to my situation. So, I apologize if this is a duplicate query. I am currently working on fetching data from an SQL database using a PHP file that passes t ...

What could be causing the NoScript tag to malfunction across different web browsers?

I've incorporated the NoScript tag into my JSP pages in the head section. To avoid conflicts with tiles, I made sure not to include multiple NoScript tags. However, I am experiencing issues in Internet Explorer where it doesn't seem to be working ...

Utilizing Material UI's TextField components for validating React forms

I've spent the past hour researching this topic and unfortunately, there isn't much information available on the internet. My goal is to validate input fields to ensure that all fields are filled out; otherwise, an error will be displayed. The le ...

Linking to an external website using AngularJS for navigation

After developing my angular app, I included an array of menu items that are displayed in the template: <nav id="menu"> <ul> <li ng-repeat="i in menuItems" ui-sref="{{ i | removeSpacesThenLowercase }}" ui-sref-active=" ...