Contentful Management library doesn't work in NextJS edge runtime in cloudflare pages #2397
Description
App Setup
I have a nextjs app with some server stuffs. I have a /contact api endpoint(pages/api/contact.ts file).
When I make a POST request to the endpoint from the client(after a form submission from the UI), I use the createEntry function to add an entry to my content.
Basically I call this addContact method from the handler function in contact.ts:
// pages/api/contact.ts
export const runtime = 'edge'; // This is required to deploy in cloudflare pages
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { name, email } = req.body
if (req.method !== 'POST') {
return res.status(405).json({ success: false })
}
try {
await addContact(name, email)
res.status(200).json({ success: true })
} catch (error) {
console.log(`Error in contact handler: `, error)
res.status(500).json({ success: false })
}
}
// server/contentful.ts
import * as contentful from 'contentful-management'
// setup client, space and environment
async function addContact(name: string, email: string) {
const entry = await environment?.createEntry(CONTENT_TYPE, {
fields: {
name: {
'en-US': name
},
email: {
'en-US': email
},
}
})
await entry?.publish()
}Deploying this in vercel works perfectly fine.
However there is build error while deploying in cloudflare pages:
.
.
22:25:18.132 | ▲ Detected Next.js version: 14.2.5
-- | --
22:25:18.134 | ▲ Running "yarn run build"
22:25:18.376 | ▲ yarn run v1.22.19
22:25:18.406 | ▲ $ next build
22:25:19.047 | ▲ Attention: Next.js now collects completely anonymous telemetry regarding usage.
22:25:19.048 | ▲ This information is used to shape Next.js' roadmap and prioritize features.
22:25:19.048 | ▲ You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
22:25:19.048 | ▲ https://nextjs.org/telemetry
22:25:19.113 | ▲ ▲ Next.js 14.2.5
22:25:19.114 | ▲
22:25:19.114 | ▲ Linting and checking validity of types ...
22:25:22.302 | ▲ Creating an optimized production build ...
22:25:28.799 | ▲ Failed to compile.
22:25:28.799 | ▲ ./src/server/post.ts
22:25:28.800 | ▲ Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
22:25:28.800 | ▲ Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation
22:25:28.800 | ▲
22:25:28.800 | ▲ The error was caused by importing 'contentful-management/dist/contentful-management.browser.js' in './src/server/post.ts'.
22:25:28.800 | ▲
22:25:28.801 | ▲ Import trace for requested module:
22:25:28.801 | ▲ ./src/server/post.ts
22:25:28.801 | ▲ ./src/pages/api/contact.ts
22:25:28.814 | ▲
22:25:28.814 | ▲ > Build failed because of webpack errors
22:25:28.835 | ▲ error Command failed with exit code 1.
22:25:28.836 | ▲ info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
22:25:28.869 | ▲ Error: Command "yarn run build" exited with 1
22:25:28.961 |
22:25:28.961 | ⚡️ The Vercel build (`npx vercel build`) command failed. For more details see the Vercel logs above.
22:25:28.961 | ⚡️ If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
22:25:28.962 |
22:25:28.996 | Failed: Error while executing user command. Exited with error code: 1
22:25:29.007 | Failed: build command exited with code: 1
22:25:29.925 | Failed: error occurred while running build command
This is the main issue it seems: Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime.
How can I resolve this issue? How am I supposed to deploy in cloudflare pages properly?
Any help would be appreciated. Thanks.