[🐛 Bug]: Cloudflare Pages build fails with custom Error component when using the Pages directory

[atrout]

Cli version

0.8.0

Next.js related information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 21.6.0: Mon Dec 19 20:43:09 PST 2022; root:xnu-8020.240.18~2/RELEASE_ARM64_T6000 Binaries: Node: 16.20.0 npm: 8.19.4 Yarn: N/A pnpm: 8.1.1 Relevant packages: next: 13.1.6 eslint-config-next: 13.1.6 react: 18.2.0 react-dom: 18.2.0 warn - Latest canary version not detected, detected: "13.1.6", newest: "13.3.1-canary.6". Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue. Read more - https://nextjs.org/docs/messages/opening-an-issue

Vercel version

28.18.3

Description

I'm getting an error from next-on-pages when it attempts to produce a Cloudflare Pages build:

⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
⚡️ 
⚡️ The following functions were not configured to run with the Edge Runtime:
⚡️  - _error.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.config.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-runtime

This is the content of the _error.tsx page (it is taken directly from these instructions on how to configure Sentry with nextjs):

/**
 * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
 *
 * This page is loaded by Nextjs:
 *  - on the server, when data-fetching methods throw or reject
 *  - on the client, when `getInitialProps` throws or rejects
 *  - on the client, when a React lifecycle method throws or rejects, and it's
 *    caught by the built-in Nextjs error boundary
 *
 * See:
 *  - https://nextjs.org/docs/basic-features/data-fetching/overview
 *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
 *  - https://reactjs.org/docs/error-boundaries.html
 */

import * as Sentry from '@sentry/nextjs';
import type { NextPage } from 'next';
import type { ErrorProps } from 'next/error';
import NextErrorComponent from 'next/error';

export const config = { runtime: 'experimental-edge' };

const CustomErrorComponent: NextPage<ErrorProps> = (props) => {
  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
  // compensate for https://github.com/vercel/next.js/issues/8592
  // Sentry.captureUnderscoreErrorException(props);

  return <NextErrorComponent statusCode={props.statusCode} />;
};

CustomErrorComponent.getInitialProps = async (contextData) => {
  // In case this is running in a serverless function, await this in order to give Sentry
  // time to send the error before the lambda exits
  await Sentry.captureUnderscoreErrorException(contextData);

  // This will contain the status code of the response
  return NextErrorComponent.getInitialProps(contextData);
};

export default CustomErrorComponent;

If I change the config to export const config = { runtime: 'edge' }; I see the same error.

Reproduction

No response

Additional Information

No response

Would you like to help?

• Would you like to help fixing this bug?

[dario-piotrowicz]

Thanks a bunch for the issue @atrout, I've had a quick look and unfortunately it seems like Vercel creates a node function for the _error instead of an edge one even if you correctly specify the runtime you want:

I'll open an issue there and try to see if there is a workaround we can adopt (but I am not sure if there is actually anything we can do about it on our side 😓)

[atrout]

Thanks for looking at this. We found a workaround using the <Sentry.ErrorBoundry> component from the @sentry/react library for client side errors.

[dario-piotrowicz]

I've created an issue in the Next repository: vercel/next.js#48490

We'll have to see what they say, I tried thinking of something but I'm afraid that we can't do much about this on our side 😓

[dario-piotrowicz]

I've updated the issue title as it seems like this is actually an issue only with the Pages routing, within the App directory error pages seem to work fine 🙂 😅

[ian]

Has anyone found a workaround for this issue yet? App router isn't an option for us since it doesn't play well with wagmi or trpc installs.

Trying to switch to cloudflare but this is a 100% blocker for us.

[isaacholt100]

Is anyone also experiencing this issue with the app router? I don't actually have a custom error file (either error.tsx or _error.tsx) yet the same error messaging is still being displayed for me when I run the build script. Seems like others have only experienced this with the pages router, is there some configuration setting I need to change to adjust the build process for the app router? Thanks

[dario-piotrowicz]

@isaacholt100 sorry to hear you're having issue... this custom error issue is quite problematic 😓

do you have an _not-found by any change?

[isaacholt100]

Yes I do have a not-found.tsx file at the top level of the app folder. And I've removed it and now it's working - thanks for the suggestion!

[dario-piotrowicz]

No problem 🙂 (although it's not a great solution, we'll have to find something better 😓)

[requiemcreatif]

Hi @dario-piotrowicz,
I had the same issue @isaacholt100 mentioned about _error and I confirm that removing not-found solved the problem, I don't how or why, but it does.
Thanks!!

[dario-piotrowicz]

@requiemcreatif thanks for confirming that, yeah it's some weird Vercel behavior unfortunately 😓

[negabaro]

I had the same issue @isaacholt100 mentioned about _error when declaring getInitialProps in _app.tsx.
Does using getInitialProps in _app.tsx result in the internal generation of the _error page?

Let me know if there is a workaround in my case.

[Crinchy]

I am also forcing the same issue on pages router with _error.tsx and nextjs 13 :(

[kev-ac]

Hi @dario-piotrowicz, I had the same issue @isaacholt100 mentioned about _error and I confirm that removing not-found solved the problem, I don't how or why, but it does. Thanks!!

For me it fails the build even when no not-found.tsx exists. It fails because the _not-found route is not configured to use the edge runtime. After creating the not-found.tsx it fails because the _error route does not use the edge runtime.

Maybe related to #413.

[s3jerico]

Thanks for looking at this. We found a workaround using the <Sentry.ErrorBoundry> component from the @sentry/react library for client side errors.

How do you actually apply this fix? @atrout

[guvenaltunsoyy]

Hello 👋🏽 I've added runtime config for the dynamic routes, and it worked even not-found.tsx is still existing!

Added this export const runtime = 'edge'; for those pages;

src/pages/api/claps.ts

src/app/post/[slug]/page.tsx
src/app/bookmarks/[year]/page.tsx