[🐛 Bug]: When returning an empty paths array from getStaticPaths I get error: Failed to produce a Cloudflare Pages build

[Qavi-Nizamani]

next-on-pages environment related information

System:
Platform: win32
Arch: x64
Version: Windows 10 Home
CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
Memory: 8 GB
Shell: Unknown
Binaries:
Node: 16.14.0
Yarn: 1.22.19
npm: 8.3.1
pnpm: N/A
Package Manager Used: npm
Relevant Packages:
@cloudflare/next-on-pages: 0.10.1
vercel: N/A
next: N/A

Description

export async function getStaticPaths() {
let paths = [];
return { paths, fallback: false };
}

If I return an empty paths array, from getStaticPaths() function I get an error.

The above code is just an example when we have no dynamic pages yet, but surely will be added in future.

Reproduction

Create a new Next.js project

Install next-on-pages: npm install --save-dev @cloudflare/next-on-pages

Create a dynamic page [slug].js, And add this code to that file

const Page = () => {
  return <div>Testing</div>;
};

export async function getStaticPaths() {
  let paths = [];

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return {
    props: {},
  };
}

export default Page;

running this command: npx @cloudflare/next-on-pages --experimental-minify
It shows this error.

▲  Created all serverless functions in: 671.882ms
▲  Collected static files (public/, static/, .next/static): 16.036ms
▲  Build Completed in .vercel\output [33s]
⚡️ Completed `npx.cmd vercel build`.

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️
⚡️     The following functions were not configured to run with the Edge Runtime:
⚡️             - [tour].func
⚡️
⚡️     If this is a Next.js project:
⚡️
⚡️     - you can read more about configuring Edge API Routes here: https://nextjs.org/docs/api-routes/edge-api-route      
⚡️
⚡️     - you can try enabling the Edge Runtime for a specific page by exporting the following from your page:
⚡️
⚡️                     export const config = { runtime: 'edge' };
⚡️
⚡️     - or you can try enabling the Edge Runtime for all pages in your project by adding the following to your 'next.conffig.js' file:
⚡️
⚡️                     const nextConfig = { experimental: { runtime: 'edge'} };
⚡️
⚡️     You can read more about the Edge Runtime here: https://nextjs.org/docs/advanced-features/react-18/switchable-runtimme

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

Everything works fine if I return at least a single param from the getStaticPaths.

Would you like to help?

• Would you like to help fixing this bug?

[james-elicx]

Hello, sorry to hear you're encountering a problem with getStaticPaths. I believe this is due to how Next.js treats them.

When using getStaticPaths for SSG, Next.js normally creates pages for the paths returned in the array, and then generates a nodejs lambda function for the fallback. Because of this, specifying fallback: false can be used to disable the incompatible fallback function, and instead tell it that non-SSG'd params should 404.

It sounds like what might be happening is that because you have no paths in your array, Next.js might be ignoring the fallback: false and is generating a nodejs function for the dynamic page instead. 🙁

If you would like to use dynamic pages instead of SSG'd ones, please either opt your route into the edge runtime or remove the use of getStaticPaths. Otherwise, I would recommend returning at least one path from your array like you would normally do.

[Qavi-Nizamani]

Thank you very much, When changing that page to edge-runtime it built successfully.
Why it isn't any where in the documentation, either next.js or next-on-pages?

EDIT:
It seems it worked, but it created another problem. Please see the screen shot below:

When I visit /tours I get 500 internal server error, it seems that index.js is not being requested, but [tour].js
Would you please let me know what could be the issue! while it's only with edge runtime.

Again everything works as expected if I return at least one slug from getStaticPaths.

[dario-piotrowicz]

@Qavi-Nizamani I can see that you're using 0.10.1? that's a rather old version of the package and things (including the request routing) have been significantly improved in v1, could you try using v1 instead?

(PS: I'm sorry 0.10.1 is currently tagged as latest so that's why npm installs that, this is something we're working on and should fix soon 🙇)

[Qavi-Nizamani]

@Qavi-Nizamani I can see that you're using 0.10.1? that's a rather old version of the package and things (including the request routing) have been significantly improved in v1, could you try using v1 instead?

(PS: I'm sorry 0.10.1 is currently tagged as latest so that's why npm installs that, this is something we're working on and should fix soon 🙇)

It works in development server with this command: npx wrangler pages dev .vercel/output/static --compatibility-flag=nodejs_compat

But when deployed on cloudflare pages it is still showing 500 internal server error.

[dario-piotrowicz]

mh.... are you deploying via the github/gitlab integration? are you sure v1 is getting run in the Pages CI? can you check the logs in the dashboard to make sure that Cloudflare Pages is running the v1 version?

The version should get printed before the build process starts:

[Qavi-Nizamani]

Yes I have checked that it is running @cloudflare/next-on-pages v1
And added the compatibility-flag "nodejs_compat" to make it work properly.

18:15:25.243 | Installing missing commands
-- | --
18:15:25.244 | Verify run directory
18:15:25.244 | Executing user command: npx @cloudflare/next-on-pages --experimental-minify
18:15:26.753 | ⚡️ @cloudflare/next-on-pages CLI v.1.0.0
18:15:26.753 |  
18:15:26.754 | ⚡️ Warning: the --experimental-minify\|-e flag is deprecated and doesn't produce any effect, the
18:15:26.754 | ⚡️ (previously named) experimental minification is now enabled by default.
18:15:26.754 | ⚡️
18:15:26.754 | ⚡️ Note: if you're using the --experimental-minify\|-e flag in your build command please remove it
18:15:26.754 | ⚡️       as it will be removed in a future version of the package (causing your command to fail).

[dario-piotrowicz]

I see.... that's really strange then... (I can't imagine why something would work locally but not in production)

I'm not really sure, we'll have to investigate this 😓

If there is any more info/code you could provide that would really help 🙂

[dario-piotrowicz]

@Qavi-Nizamani I've created this simple application by following your instructions + adding the edge runtime export: empty-getstaticpaths-pages-13.4.4/slug.js

It seems to work fine locally, I've also deployed it and it seems to be ok there too:
https://90985905.next-on-pages-test-5h3.pages.dev/slug

Could you check my application and see if I am missing some steps to reproduce the issue?
(or double check your application to see if it can actually get deployed) 🙏

[dario-piotrowicz]

I've created a PR to document that the paths array shouldn't be empty (#348)

Besides that I'm closing the issue due to inactivity.

@Qavi-Nizamani if you circle back to this and still have problems with your application feel free to open a new issue or let me know here 🙂