Vercel EDGE_FUNCTION_INVOCATION_FAILED for React 18 and Server Components experimental features

[fernandojbf]

Using a clean next project with react 18 and concurrentFeatures and serverComponents enabled I'm having 500 EDGE_FUNCTION_INVOCATION_FAILED on vercel. Locally everything looks right.

  "dependencies": {
    "next": "^12.0.3-canary.1",
    "react": "^18.0.0-alpha-5cccacd13-20211101",
    "react-dom": "^18.0.0-alpha-5cccacd13-20211101"
  },

Same error on 12.0.2.

Is vercel having errors using experimental react-18 features?

[leerob]

Could you share the repository so we can investigate?

[fernandojbf]

Hey, Sorry for the delay.
I've just made the repo public.
https://github.com/fernandojbf/fernandoferreira/tree/react-18

Now the error is not EDGE_FUNCTION_INVOCATION_FAILED. Is now returning 404 only in Vercel

[FeMaffezzolli]

A faced a similar issue. In my case I had a _middleware file doing nothing but a console.log of the page path. Removing the file completely solved my problem.

[MaxiSantos]

The same happened to me with next 12.3.0.. I had a console.log({req}) in a middleware and it was trhowing this error

Error: Failed to get the 'cache' property on 'Request': the property is not implemented.

Removed the console.log fixed the issue

[bakerue-owner]

This helped fix my issue too. Thanks!

[mtareqhosain]

The same happened to me with next 12.3.0.. I had a console.log({req}) in a middleware and it was trhowing this error

Error: Failed to get the 'cache' property on 'Request': the property is not implemented.

Removed the console.log fixed the issue

then how do check request in the middleware file?

[jlarmstrongiv]

I am also having this error. My config has these features:

{
    reactStrictMode: true,
    poweredByHeader: false,
    optimizeFonts: false,
    staticPageGenerationTimeout: 60,
    env: {
      ROOT_PATH: process.env.LAMBDA_TASK_ROOT || process.cwd(),
      APP_FOLDER: appFolder,
      VERCEL_PROJECT: vercelProject,
      NEXT_PUBLIC_DOMAIN: nextPublicDomain,
      NEXT_PUBLIC_APP_NAME: appName,
    },
    swcMinify: true,
    experimental: {
      pageEnv: true,
      scrollRestoration: true,
      externalDir: true,
      // reactRoot: "concurrent",
      // concurrentFeatures: true,
    },
    typescript: {
      tsconfigPath: process.env.VERCEL
        ? "tsconfig.build.json"
        : "tsconfig.json",
    },
  };

[jlarmstrongiv]

Downgrading react and react-dom and disabling concurrent mode and features fixed the issue.

[jlarmstrongiv]

@leerob I am able to reproduce the error, see https://github.com/jlarmstrongiv/edge-function-invocation-failed and https://edge-function-invocation-failed.vercel.app/

This bug is a blocker from using Vercel to host NextJS in multiple upcoming projects.

[leerob]

Thanks for the reproduction! We will take a look. As mentioned in the docs, this is still in beta - I would mention not using React Server Components right now for production during your move to Vercel.

[jlarmstrongiv]

@leerob thank you! By the way, I’m not using server components. Being able to write loading and error states declaratively with suspense and error boundaries are worth being on the beta. In my opinion, there’s still much work to be done on server components before I can use it in a project.

[kiily]

Any updates on this, we just added a very simple piece of middleware to check a bearer token and it's failing once it is deployed. Have there been any recent updates on this?

[leerob]

Hey! This issue is about experimental React features in Next.js on Vercel, not just Edge Functions in general. If you have a reproduction for the bearer token issue in a repo, we can take a look.

[Shakahs]

I believe there is a bug with the edge function WebPack bundling. I have created a sample repo: https://github.com/Shakahs/nextjs-edge-bug-demo

Taking the standard Next.js TS template and adding the following middleware causes the edge function to crash when running on Vercel.

// pages/_middleware.ts
import type { NextFetchEvent, NextRequest } from 'next/server'
import {trimEnd} from 'lodash-es'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
    return new Response(trimEnd('Hello, world!   '))
}

The Vercel log contains the following:
/ 09:56:01:49 ID:z9jmb-1643392561450-2f19d1a8d21e [EvalError: Code generation from strings disallowed for this context]

The EvalError is related to WebPack usage.

[kiily]

Seems to be that there is some sort of error in the function, in our case it was a function throwing early. I was unable to see the logs at first as the Vercel functions tab was giving me a 404 but after rebuilding, I was able to spot the error

[XahidEx]

faced this error today. Couldn't fix it yet.

[amyegan]

Hi @XahidEx! This post is a little old and getting a bit cluttered. Would you mind starting a new discussion with details about the error you're seeing? If you can share a minimal reproducible example in your post, that will help us with debugging 🙏