Failed to produce a Cloudflare Pages build from the project.
⚡️ Completed
18:22:29.917 ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project. 18:22:29.917 ⚡️ 18:22:29.917 ⚡️ The following routes were not configured to run with the Edge Runtime: 18:22:29.917 ⚡️ - /api/contact 18:22:29.918 ⚡️ - /api/hello 18:22:29.918 ⚡️ 18:22:29.918 ⚡️ Please make sure that all your non-static routes export a config object specifying the edge runtime, like: 18:22:29.918 ⚡️ export const config = { runtime: 'edge' }; 18:22:29.918 ⚡️ 18:22:29.918 ⚡️ You can read more about the Edge Runtime on the Next.js documentation: 18:22:29.918 ⚡️ https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
npx vercel build.
18:22:29.91618:22:29.917 ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project. 18:22:29.917 ⚡️ 18:22:29.917 ⚡️ The following routes were not configured to run with the Edge Runtime: 18:22:29.917 ⚡️ - /api/contact 18:22:29.918 ⚡️ - /api/hello 18:22:29.918 ⚡️ 18:22:29.918 ⚡️ Please make sure that all your non-static routes export a config object specifying the edge runtime, like: 18:22:29.918 ⚡️ export const config = { runtime: 'edge' }; 18:22:29.918 ⚡️ 18:22:29.918 ⚡️ You can read more about the Edge Runtime on the Next.js documentation: 18:22:29.918 ⚡️ https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
Rendering: Edge and Node.js Runtimes
Learn about the switchable runtimes (Edge and Node.js) in Next.js.
10 Replies
I would recommend changing those two routes to use the edge runtime, like it suggests.
like so ?
import nodemailer from "nodemailer";
import sgTransport from "nodemailer-sendgrid-transport";
const transporter = {
auth: {
// Update your SendGrid API key here
api_key: "...",
},
};
const mailer = nodemailer.createTransport(sgTransport(transporter));
// Add the config object for Edge Runtime
export const config = { runtime: 'edge' };
export default async (req, res) => {
// console.log(req.body)
const { name, email, number, subject, text } = req.body;
const data = {
// Update your email here
to: "[email protected]",
from: email,
subject: "Hi there",
text: text,
html:
<b>From:</b> ${name} <br />
<b>Number:</b> ${number} <br />
<b>Subject:</b> ${subject} <br />
<b>Message:</b> ${text}
,
};
try {
const response = await mailer.sendMail(data);
console.log(response);
res.status(200).send("Email send successfully");
} catch (error) {
console.log(error);
res.status(500).send("Error proccessing charge");
}
};
it still give me the same errorDepending on what your setup is like and if you're using the pages directory, you might need to use
experimental-edge instead of edge. Give that a go and see if it changes things - from what I gather, I believe you are using the pages directory instead of the app directory.same did you fix it ?
i have the same directory structure as you, but my /api folder is a cloudflare worker that has types my nextjs needs to see
I even added the folder under excludes - the issue is cloudflare pages thinks the api folder is a route when it isn't.
I know for sure that this is the cause because I removed all SSR routes and all imports of the API directory. The vercel part of the next-on-pages script did it's job, but the cloudflare page build part didn't
@5927 so is there a way to make 'next-on-pages' ignore the /api folder on deployment
putting the api folder out of the directory that the '@cloudflare/next-on-pages@1' is ran fixes it, but hoping to keep them in the same place
We just use the build that nextjs creates. If you want nextjs to ignore your directory, delete it
Nextjs isn't the problem - the build nextjs creates is fine also says so in the CLI that vercel completed successfully and I can't delete the directory because it has types that my nextjs build needs
btw the api folder isn't in the pages/ and app/ folder that's where nextjs determines something is route
If you get a build error, it's normally an error from trying to process what Next.js generates. Next.js and Vercel may build successfully, but that doesn't mean we can deploy everything they build. We need to take that output and process it and figure out what we can deploy from it. If you get a build error like the one at the start of this thread, that means Next.js generated a Node.js function for your route that we can't deploy because Cloudflare Workers uses the Edge runtime and not Node.js. Vercel however uses AWS Lambda and can deploy Node.js to it, which is why they might generate Node.js functions for non-Edge, non-static routes.
If you want to exclude something from being included when Next.js builds your application, place it somewhere where Next.js won't try and generate a route for it, or delete it. Alternatively, you could opt the route into the edge runtime.
I opted for all of the files it mentioned and that didn't affect anything - I'll just make a script which moves the API folder out of the current folder since "@/" resolves to "../" and "./*"