[🐛 Bug]: Server actions cause an exception

[ts-web]

next-on-pages environment related information

System: Platform: linux Arch: x64 Version: #202411060320 SMP PREEMPT_DYNAMIC Thu Nov 21 18:51:36 UTC 2024 CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics Memory: 14 GB Shell: /bin/bash Package Manager Used: npm (10.8.2)

Relevant Packages: @cloudflare/next-on-pages: 1.13.7 vercel: 41.0.2 next: 15.1.5

Description

When loading a /login route I was getting this error:

✘ [ERROR] DOMException {

    code: 5,
    name: 'InvalidCharacterError',
    message: "atob() called with invalid base64-encoded data. (Only whitespace, '+', '/',
  alphanumeric ASCII, and up to two terminal '=' signs when the input data length is divisible by 4
  are allowed.)",
    stack: "InvalidCharacterError: atob() called with invalid base64-encoded data. (Only
  whitespace, '+', '/', alphanumeric ASCII, and up to two terminal '=' signs when the input data
  length is divisible by 4 are allowed.)\n" +
      '    at _
  (file:///home/user/src/cf-pages-next/.vercel/output/static/_worker.js/__next-on-pages-dist__/webpack/2792.js:1:1928)\n'
  +
      '    at a
  (file:///home/user/src/cf-pages-next/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/login.func.js:1:27434)\n'
  +
      '    at C
  (file:///home/user/src/cf-pages-next/.vercel/output/static/_worker.js/__next-on-pages-dist__/functions/login.func.js:1:28134)',
    digest: '1523712075'
  }

Reproduction

Minimal reproduction: https://github.com/ts-web/cloudflare-pages-next-starter/tree/56cbebb81b00851bec1b26fede110b746fa9d24f

I've narrowed this down to this server action function:

async () => {
        'use server';
        await new Promise((resolve) => {
          setTimeout(resolve, 2000);
        });
        console.log('sign in', redirectUrl);
      }

• If the server action is within page.tsx the error does not appear.
• If the server action is embedded in @/components/SignIn, the error appears.

See the above reproduction commit for the bug. The commit preceding it is a working version. The buggy commit just moves the server action function to the @/components/SignIn module.

Pages Deployment Method

None

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• [ ] Would you like to help fixing this bug?

[ts-web]

It looks like I was missing a "use client" at the top of my @/components/SignIn client component.

After adding "use client", the build shows a more helpful error. And everything works once I extract the signIn function to an @/actions/signIn module.

The helpful error was this:

▲  Error:   x It is not allowed to define inline "use server" annotated Server Actions in Client Components.
▲   | To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
▲   | 
▲   | Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
▲   | 
▲     ,-[/home/tias/src/cf-pages-next/src/components/SignIn.tsx:13:1]
▲  10 |   return (
▲  11 |     <form
▲  12 |       action={async () => {
▲  13 |         'use server';
▲     :         ^^^^^^^^^^^^
▲  14 |         await new Promise((resolve) => {
▲  15 |           setTimeout(resolve, 2000);
▲  16 |         });
▲     `----
▲  
▲  Import trace for requested module:
▲  ./src/components/SignIn.tsx

Perhaps there's an improvement to be made in terms of error messages? Because the atob error message was NOT helpful. Otherwise feel free to close this ticket. I hope this helps someone else with the same issue.

[ander-rentcars]

I'm trying to deploy the NextAuth example (next-auth-example) to Cloudflare Pages and encountered the same issue when adapting it to run in the Edge runtime.

After some troubleshooting, the following instructions helped me resolve the issue:

https://nextjs.org/docs/14/app/building-your-application/data-fetching/server-actions-and-mutations#client-components

[dario-piotrowicz]

Hello 🙂 Thank you for the issue and apologies for the late reply.

Earlier this year we released our Cloudflare adapter for OpenNext, and we have been continuously investing effort in its improvement since then. Existing deployments can continue to use the next-on-pages tooling, but the Cloudflare adapter for OpenNext is currently stable and recommended for deployment of Next.js applications to Cloudflare.

As such, we will no longer be maintaining next-on-pages. We recently deprecated the package on npm and we plan to archive this repo on Monday Sep 29, 2025. In preparation for archival, we are closing all open issues and PRs.

If you have concerns, please feel free to reply here before the repo is archived (after that, it will no longer be possible to comment) or to reach out to our team on Discord.

Thanks so much for using and contributing to next-on-pages 🧡