Runtime error when middleware and catch-all route present and invalid URI requested

[devinpitcher]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.1.6
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome 101.0.4951.64 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

next start

Describe the Bug

When pages/_middleware.ts and a catch-all route (pages/[...slug].tsx) is present, an invalid URI that fails decodeURIComponent causes a runtime error. Removing the catch-all route or middleware resolves the issue.

error - DecodeError: failed to decode param
    at decode (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/shared/lib/router/utils/route-matcher.js:18:23)
    at /Users/devin.pitcher/Code/my-app/node_modules/next/dist/shared/lib/router/utils/route-matcher.js:28:21
    at Array.forEach (<anonymous>)
    at Object.match (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/shared/lib/router/utils/route-matcher.js:22:29)
    at DevServer.runMiddleware (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/server/next-server.js:837:50)
    at async DevServer.runMiddleware (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/server/dev/next-dev-server.js:435:28)
    at async Object.fn (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/server/next-server.js:710:30)
    at async Router.execute (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/server/router.js:226:36)
    at async DevServer.run (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/server/base-server.js:636:29)
    at async DevServer.run (/Users/devin.pitcher/Code/my-app/node_modules/next/dist/server/dev/next-dev-server.js:483:20) {
  middleware: true
}

Expected Behavior

http://localhost:3000/%C0 should return a HTTP 400 error. When both middleware and a catch-all route are present, a runtime error occurs. Removing either one will result in a HTTP 400 error as expected.

To Reproduce

yarn create next-app --typescript
cd my-app
yarn add next@canary --save

pages/_middleware.ts

import { NextResponse, NextFetchEvent, NextRequest } from 'next/server'

const middleware = (req: NextRequest, ev: NextFetchEvent) => {
  return NextResponse.next();
}

export default middleware;

pages/[...slug].tsx

import type { NextPage } from 'next';

const CatchAll: NextPage = () => {
  return (
    <h1>Hello, world!</h1>
  )
}

export default CatchAll;

yarn dev --port 1337

Open browser to http://localhost:1337/%C0

[devinpitcher]

Similar: #36964

[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.