Axios doesn't work on edge runtime, Adapter 'http' is not available in the build
schehata opened this issue · comments
Describe the bug
I am building a library that uses axios, when I run it on Serverless edge functions (e.g: on vercel) it fails with error:
Error: Adapter 'http' is not available in the build
at Object.getAdapter (webpack-internal:///(middleware)/../../sdks/node/node_modules/axios/dist/browser/axios.cjs:2371:13)
at Axios.dispatchRequest (webpack-internal:///(middleware)/../../sdks/node/node_modules/axios/dist/browser/axios.cjs:2426:28)
It seems that it doesn't pick any adapter when running on edge. I tried to manually set adapter to http but
I got the same error.
I know fetch is supported on edge runtime, so I tried with a custom adapter, its not completed, still struggling with setting
the headers and query params but it works and doesn't generate errors:
axiosOptions.adapter = function (config) {
return new Promise(async (resolve, reject) => {
try {
const reqOptions: RequestInit = {
method: config.method,
keepalive: true,
body: config.data,
}
const resp = await fetch("some url", reqOptions);
const payload = await resp.text();
const response: AxiosResponse = {
data: payload,
status: resp.status,
statusText: resp.statusText,
headers: {
'content-type': resp.headers.get('content-type') || undefined,
},
config: config,
};
resolve(response);
} catch (err: any) {
console.log({ err });
const axiosErr = new AxiosError(err.message);
reject(axiosErr);
}
});
};I don't know it the http adapter could work on edge, is there a way to force axios to include it? If not, can we add a fetch adapter to the lib?
When I run axios without creating an instance the errors differs a bit:
Error [TypeError]: adapter is not a function
at dispatchRequest (webpack-internal:///(middleware)/./node_modules/axios/lib/core/dispatchRequest.js:58:10)
at Axios.request (webpack-internal:///(middleware)/./node_modules/axios/lib/core/Axios.js:109:15)
at Axios.<computed> [as get] (webpack-internal:///(middleware)/./node_modules/axios/lib/core/Axios.js:131:17)
at Function.wrap [as get] (webpack-internal:///(middleware)/./node_modules/axios/lib/helpers/bind.js:9:15)
at Object.handler (webpack-internal:///(middleware)/./pages/api/axios.js:11:69)
at adapter (webpack-internal:///(middleware)/./node_modules/next/dist/server/web/adapter.js:60:33)
at Module.__WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///(middleware)/./node_modules/next/dist/build/webpack/loaders/next-edge-function-loader.js?absolutePagePath=%2FUsers%2Fshehata%2Faxiom%2Ftesting-projects%2Faxiom-local-next%2Fpages%2Fapi%2Faxios.js&page=%2Fapi%2Faxios!:24:87)
To Reproduce
create a nextjs project and setup an edge function under pages/api/.
run on vercel platform, will run in Edge runtime.
Code snippet
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import axios from 'axios'
async function handler(req, _ev) {
await axios.get('https://google.com')
return new Response('ok')
}
export const config = {
runtime: 'experimental-edge',
};
export default handler;Expected behavior
No response
Axios Version
1.2.0
Adapter Version
No response
Browser
No response
Browser Version
No response
Node.js Version
16.15.0
OS
OSX
Additional Library Versions
No response
Additional context/Screenshots
No response
We have noticed this bug in our project, too. With both Microsoft Edge and Google Chrome. People on stackoverflow also talk about it: https://stackoverflow.com/questions/75280544/uncaught-in-promise-error-error-adapter-http-is-not-available-in-the-build .
Workaround
It seems there is no easy workaround, but you can use fetch() in case you are developing browser extensions.
Hi, @schehata ) I'm stuck in a similar situation. Currently searching for a solution. Have you found any kind of solution to this problem?
Hi, @schehata ) I'm stuck in a similar situation. Currently searching for a solution. Have you found any kind of solution to this problem?
I tried creating my fetch adapter, but it didn't workout as well. I ended up removing axios and using native fetch.
We have noticed this bug in our project, too. With both Microsoft Edge and Google Chrome. People on stackoverflow also talk about it: https://stackoverflow.com/questions/75280544/uncaught-in-promise-error-error-adapter-http-is-not-available-in-the-build .
Workaround
It seems there is no easy workaround, but you can use fetch() in case you are developing browser extensions.
hi @vaidotasstrazdas this is not related to the browser "edge", This is something different, its a runtime that serverless functions can run on, you can read more on vercel edge runtime.
Default adapter setting: {adapter: ['xhr', 'http']}
Axios is trying to use the first adapter available, so if you're getting this error it means your environment doesn't support both xhr and http adapters. Currently, the Axios adapter loader is fairly minimalistic, as a decent implementation requires other depend tasks to be done beforehand, so it can only display the latest adapter load error.
If you set {adapter: 'xhr'} you will get an error about xhr only. In practice, this means XMLHttpRequest API is not available.
any suggestions on this issue? I am running into this issue too.
That axios is not working on edge workers like Deno Deploy, Vercel Edge Functions or Cloudflare Workers is an absolute dealbreaker for me.
I have the same issue and I think I have to drop axios if this is not getting fixed.
I have the same issue when using axios in middleware.
same here
Also having issue with Axios in middleware. I think fetch is the way to go for any requests happening in middleware
Yeah, I just migrate to xior
Almost same API with axios, plugins support, based on fetch, the size very lite too.
I migrated to ky-universal instead as it has more support and stars than xior, and is directly based off of ky (11k stars), which implements some cool features that axios doesn't have.
You can try the new beta, which has added the fetch adapter, but there is no guarantee of compatibility with the Edge Runtime.
npm i axios@next
Ok, the only way in the meantime is using fetch, at least that worked for me