Axios request getting mixed up with mock requests: TypeError: mockAdapter.originalAdapter is not a function

Question

I have axios and axios-mock-adapter installed in my nextjs app, but when the Axios request running in localhost:3000 tries to call an AWS Lambda request (that I know works), I'm getting the error:

Goals (get) api error: TypeError: mockAdapter.originalAdapter is not a function

The request is within a useEffect hook - and stopping at the catch error:

useEffect(() => {
    const getGoals = async () => {
        try {
            const response = await api.get(apiUrl)
            setGoals(response.data.body)
        } catch (error) {
            console.log('Goals (get) api error:', error)
        }
    }
    getGoals()

})

where api is imported from here:

import axios from 'axios'
export default axios.create({
baseURL: 'https://xxxxxxxxxx.execute-api.us-east-2.amazonaws.com/test'})

The mock adapter is in a separate component:

    import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

const mock = new MockAdapter(axios)

export default mock

I don't understand (and never had this issue) why my real axios request is getting confused with the mock request. I've run both in parallel before, and I want to continue to use axios-mock-adapter for my jest tests.

Why does my api.get in my useEffect fail?

Answer 1

Issue addressed here, per user "teetotum" comment this is due to versions.

using "axios": "1.1.3" will help to resolve issue for the moment.

Answer 2

In axios v 1.1.3 (and below) the original default adapter is a function and after that they made the changes. Before the change, a custom adapter could secure a reference to the default adapter via axiosInstance.defaults.adapter and call it later to delegate which axios is currently not able to.

You can uninstall the current axios by:

npm uninstall axios

Then install axios 1.1.3 using:

npm i [email protected]

You can follow the discussion about this issue here.