axios & middleware error - adapter is not a function

[SKumarSpace]

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

14.16.0

What browser are you using?

Microsoft Edge (Chromium)

What operating system are you using?

Windows

How are you deploying your application?

next dev

Describe the Bug

Unable to call axios from middleware.
When I do, I receive the following error:

error - node_modules\axios\lib\core\dispatchRequest.js (58:0) @ dispatchRequest
TypeError: adapter is not a function

I also tried this with next@canary, but it also has the same issue.

Expected Behavior

Http Request from Axios should go through

To Reproduce

• Create _middleware.ts file
• Call Axios Get request inside middleware

const resp = await axios.get('https://httpbin.org/ip');

[davidecutrupi]

I have the same problem.
Using the fetch function it works.

[Kikobeats]

Probably the thing that is happening there is axios is using some Node.js modules and the Edge Function is running in a Web Runtime where Node.js APIs are missing.

Why not just use fetch? It's global, it's standard, it's expected.

[Kikobeats]

After investigation, we determine what is happening is axios delegates into XMLHttpRequest and it's missing on the Edge Function; this is a limitation right now can't be resolved in the short term; also Axios is working in a new version that uses fetch instead, so there is not too much we can do right now.

I recommend you to use native fetch or ky in case you want some sugar syntactic over fetch API.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.