Contentful JS library doesn't work in nextjs edge runtime

[RProduction]

Expected Behavior

It should return entry object

Actual Behavior

Console log shows
[Error: Adapter 'http' is not available in the build]

Possible Solution

Provide fetch API from contentful library

Steps to Reproduce

1. Initialize contentful client
2. set nextjs runtime to edge
3. execute get query

Context

Environment

• Language Version: 20.9.0
• Package Manager Version: 10.1.0

[marcolink]

Hi RProduction (@RProduction),
Have you already tried using an axios adapter for your edge environment?
You can find some infos on how to set your own axios adapter in this thread.

[MickL]

contenful.js should not use Axios and instead use fetch directly or another library to support Edge Workers like Vercel Edge Functions or Cloudflare Workers

[Meagsy]

Super confused about how to get the previewClient to work on edge runtime. I tried all the suggestions but it just fetches the original blog post.

[axe312ger]

It should work now with v11! Can you all please give it a test and let me know if it worked? RProduction (@RProduction) Mick Lawitzke (@MickL) Meagsy

[MickL]

How did you solve it? Personally I would have suggested to use https://github.com/unjs/ofetch

[axe312ger]

Mick Lawitzke (@MickL) the plugin is updated and restructured, now delivers proper modern JS (plus fallback to common JS for older systems)

We can not (yet) replace axios, but you can always use axios fetch adapter if you need fetch to be used in the background:

• https://github.com/vespaiach/axios-fetch-adapter
• https://github.com/contentful/contentful.js?tab=readme-ov-file#request-configuration-options (httpsAdapter)
• Another user did it like this: [Feature Request] Allow to use Fetch API adapters during client creation. #1973 (comment)

[MickL]

In my opinion Axios should be removed. I would like to integrate Contentful as a headless CMS in my projects but I dont want to bloat my code with another http library. We use Nuxt in most of our projects which uses ofetch, a simple wrapper around fetch that works in Browsers, Node and Edge Workers. I know that Next.js also puts a wrapper around native fetch, but it is not a public reusable library like ofetch, as far as I know.