Cloudflare Developers•2y ago

Nextjs, next-on-pages, "hanging Promise was canceled"

Hi all, I'm trying to build a statically rendered site on Pages using Next. I have a dynamic route as follows: /app/(content)/articles/[slug] that will render content pulled from a headless CMS. When I use npm run dev with Next, these routes work fine. but when I build the site with npx @cloudflare/next-on-pages@1 and then use wrangler to do a preview, it works for other non-dynamic pages but throws on the [slug] with:

A hanging Promise was canceled. This happens when the worker runtime is waiting for a Promise from JavaScript to resolve, but has detected that the Promise cannot possibly ever resolve because all code and events related to the Promise's I/O context have already finished.

✘ [ERROR] Uncaught (in response) Error: The script will never generate a response. I've been trying to reduce to solve, and removed everything I can imagine so that I've literally got this as my page.js for the [slug] route:

export const runtime = 'edge';

export async function generateStaticParams() {
  return [{ slug: 'article-one'}, {slug: 'article-two'}];
}

export default async function articlePage() {
   return (
    <div>
      <div>Hello</div>   
    </div>
  )
}

export const runtime = 'edge';

export async function generateStaticParams() {
  return [{ slug: 'article-one'}, {slug: 'article-two'}];
}

export default async function articlePage() {
   return (
    <div>
      <div>Hello</div>   
    </div>
  )
}

Even that generates the hanging Promise error, which....I dont' get. I suspect I'm missing something with how generateStaticParams works with next-on-pages? Or...well, I don't know. That's why I'm here. 🙂 Any ideas on why this page is not working, even when there are no outside calls/async functions (so to speak)?

13 Replies

WulflokOP•2y ago

If it matters: other pages that call my headless CMS work and show content. If I remove this route, I can build the site and preview it with no errors. It's only when I add this dynamic route that the promise-related errors start AND it's only on this dynamic [slug] route that I get the error. Other pages still render fine with next-on-pages and wrangler.

WulflokOP•2y ago

and if it helps, a repo with the rest of the code (including the original pages.js for the [slug] route) - https://github.com/mbakaitis/san-next-flare-site

GitHub

GitHub - mbakaitis/san-next-flare-site

Contribute to mbakaitis/san-next-flare-site development by creating an account on GitHub.

James•2y ago

fwiw, generateStaticParams won't actually do anything if you use the edge runtime because it creates an edge function for the route instead of prerendering the static pages. If you try doing next build and next start, does the error also occur? If it only occurs with next-on-pages+wrangler, please can open an issue on the next-on-pages repository for this so that it can be looked into (with a link to the repro) and not forgotten - i dont have time to try and setup sanity and look into it at the moment.

WulflokOP•2y ago

next build and start work fine with both this simplified version and the original. I only get the promise errors with next-on-pages/wrangler

James•2y ago

:/ yeah please open an issue on the repo then 🙂

WulflokOP•2y ago

on the next-on-pages repo?

James•2y ago

Yes please

WulflokOP•2y ago

so if I remove the export for edge runtime? @Cloudflare/next-on-pages throws an error and refuses to build. are you saying I don't even need the generateStaticParams at all with next-on-pages?

James•2y ago

If you opt out of the edge runtime, you'll need to export a route segment config option of export const dynamicParams = false; so it doesn't generate a lambda fallback function If you use the edge runtime for a route, no static pages will be generated for it, so generateStaticParams will have no effect

WulflokOP•2y ago

OK, so if I literally remove everything related to the CMS and hard code everything, no more promise errors. If I leave that stuff but remove the export const runtime='edge', I get this:

 ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - articles/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

 ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️      The following routes were not configured to run with the Edge Runtime:
⚡️        - articles/[slug]
⚡️ 
⚡️      Please make sure that all your non-static routes export the following edge runtime route segment config:
⚡️        export const runtime = 'edge';
⚡️ 
⚡️      You can read more about the Edge Runtime on the Next.js documentation:
⚡️        https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes

that's after the vercel build completes So I'm confused, I'm sorry to say. I'm trying to distill my repo down to a really simple branch that can repro the problem. Going all the way to hard-coding doesn't seem to do it. It all seems to be around this dynamic route, but I'm struggling to figure out how to show it repro without also having you get access to a Sanity dataset that it would use.

James•2y ago

Yes you need to export the route segment config option I said above to tell nextjs not to generate a fallback lambda function when using dynamic routes that don't use the edge runtime.

WulflokOP•2y ago

And that was it. dynamicParams and now it built and is working with the original with no errors. As always: HUGE thanks! I think that did it.

James•2y ago

Glad to hear it's working fine now 🙂

Gaming

Programming

Nextjs, next-on-pages, "hanging Promise was canceled"