Vercel's edge runtime responds with 500 Internal Server Error

[darkoatanasovski]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.3.0: Mon Jan 30 20:39:35 PST 2023; root:xnu-8792.81.3~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 16.13.2
      npm: 8.1.2
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 13.3.0
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Middleware / Edge (API routes, runtime), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue

https://github.com/darkoatanasovski/dynamic-routes-with-edge-runtime

To Reproduce

1. Deploy the code from the GitHub link above
2. Try to access the dynamic route ( e.g. https://dynamic-routes-with-edge-runtime.vercel.app/items/123 )

Note: To reproduce this bug, you need to set runtime to edge in your next.config.js and deploy it to Vercel's servers. On the local dev server, seems like you can't reproduce the issue

e.g.

/** @type {import('next').NextConfig} */
const nextConfig = {
	experimental: {
		appDir: true,
		runtime: "edge",
	},
}

module.exports = nextConfig;

Describe the Bug

If you try to use appDir and dynamic routes in combination with edge runtime, there is an issue with parsing the path parameters which is not the case in nodejs runtime. So, the bug here is that you can't access the params like params.paramName

e.g.
this works in nodejs runtime, but doesn't work in edge runtime:

export default async function Page({ params }) {
    return params.id
}

If you try to access this route [ https://dynamic-routes-with-edge-runtime.vercel.app/items/123 ] server responding with 500 Internal Server Error
But if you try to add query parameter to this route, seems like there is no issue.
e.g.
https://dynamic-routes-with-edge-runtime.vercel.app/items/123?id=123

Also, there are two errors in the logs:
First error:

TypeError: Cannot read properties of undefined (reading 'id')
    at (node_modules/next/dist/esm/server/app-render/app-render.js:175:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:225:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:246:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:245:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:748:0)
    at (node_modules/next/dist/esm/server/web-server.js:296:0)
    at (node_modules/next/dist/esm/server/base-server.js:943:0)
    at (node_modules/next/dist/esm/server/base-server.js:1066:0)
    at (node_modules/next/dist/esm/server/response-cache/web.js:46:0)

Second error:

TypeError: Cannot read properties of null (reading 'default')
    at (node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js:65:0)
    at (node_modules/next/dist/esm/server/web-server.js:343:0)
    at (node_modules/next/dist/esm/server/base-server.js:1401:0)
    at (node_modules/next/dist/esm/server/base-server.js:1296:0)
    at (node_modules/next/dist/esm/server/base-server.js:555:0)
    at (node_modules/next/dist/esm/server/web-server.js:254:0)
    at (node_modules/next/dist/esm/server/router.js:293:0)
    at (node_modules/next/dist/esm/server/base-server.js:529:0)

Expected Behavior

to work without adding the query parameter, exactly like in the nodejs runtime

Which browser are you using? (if relevant)

not relevant

How are you deploying your application? (if relevant)

not relevant

[darkoatanasovski]

fixed in v13.3.1-canary.6

[KajSzy]

Seems to be broken in v13.3.1-canary.9

[ivorhoulker]

Having the same issue (in my case with nested dynamic routes like /[en]/artist/[jim]) in v13.3.1-canary.11
Adding a random query parameter ( /[en]/artist/[jim]?test=works) makes it work.
Tried reverting to v13.3.1-canary.6 but had the same issue.

[KajSzy]

This occurs only when parent route has dynamic segment ie /post/[postId]/comments/[commentId]
Error will be thrown when navigating to url /post/1/comments/1

[bjcgg]

I have the same issue in latest release 13.3.1 and same in canary 19.
Can't access params: {lang, slug} in a route like /[lang]/shop/[slug].

[tommybarvaag]

I have encountered this issue in the latest 13.3.4 release and the error has been occurring since around 13.3.1-canary.4.

@ivorhoulker mentions that adding a random query parameter forces the route to actually work. I can confirm that this workaround still works in 13.3.4.

Hopefully, the issue will be fixed soon.

[plasmadice]

Just struggled out a solution. My issue was that the previous versions of Nextjs's api routes were extremely forgiving. I was using this pattern:

export default function handler(req: any, res: any) {
  const main = async () => {
      let data = {example: true}
      res.status(200).json(data)
  }

  return main().catch((err) => err)
}

It did not return anything and yet I could retrieve data on on the frontend with this pattern:

async function getCode() {
    const url = `${process.env.NEXT_PUBLIC_URL}/api/example`
    const res = await fetch(url, { cache: 'no-store' })
    const data = await res.json()

    return data
  }

  const code = await getCode()

Blew up with the error OP got. Routes giving me 500 errors. I'm using a similar pattern, but now I'm returning the response and it works. The way that the data is fetched in the component is unchanged. I'm using this pattern because I need a try/catch block inside of main()

export async function GET(request: Request) {

  let data = {}
      
  const main = async () => {
      data = {example: true}
  }
    
  await main()
  return NextResponse.json(data)
}

[bjarn]

Can confirm this happens with rewrites too.

Rewriting to tenant.com to /[tenant]/a-route expects params.tenant, but params seems to be undefined.

Unable to reproduce locally even with Edge enabled, only happens after deploying to Vercel.

TypeError: Cannot read properties of undefined (reading 'tenant')
    at (node_modules/next/dist/esm/server/app-render/app-render.js:171:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:447:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:438:0)
    at (node_modules/next/dist/esm/server/app-render/app-render.js:761:57)

Edit:

This only happens for nested dynamic segments.

For example:

[tenant]/page.tsx is fine.

[tenant]/(authenticated)/[someId]/page.tsx throws the error mentioned above.

[kavehsaket]

13.4.1 same issue

[corbanvilla]

Appears to be fixed for me in 13.4.2-canary.0

[timneutkens]

This is fixed in #49315 indeed! Thanks for the report 🙏

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.