Cannot find name 'URLPattern'

[jonahallibone]

Verify canary release

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

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
    Binaries:
      Node: 16.13.1
      npm: 8.9.0
      Yarn: 1.22.10
      pnpm: 4.14.4
    Relevant packages:
      next: 12.2.0
      eslint-config-next: 12.2.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

vercel

Describe the Bug

I am trying to upgrade to the GA Middlware. I previously had used logic such as

const { page }  = req
...
const isActualPage = !!page.name

to test against the URL in my middleware so i could be sure that I was only affecting urls that corresponded to my pages directory. Since this was removed in next 12.2 I had begun following the guide found here to upgrade my application to use URLPattern instead. I am, however, having trouble using that as VSCode and TS are telling that name doesn't exist. I am having a hard time finding any information on URLPattern at all in other applications, so debugging as been tough.

If there's something I need to add my global namespaces or otherwise, this just doesn't seem to work with the default Next.js TS config.

Expected Behavior

new URLPattern() should be available in VSCode/TS globals

Link to reproduction

https://codesandbox.io/s/ecstatic-marco-s3lo6n?file=/middleware.ts

To Reproduce

1. Create a middleware.ts in your src or root folder
2. Try and use new URLPattern()

[SukkaW]

URLPattern is a new web standard that landed recently, check URLPattern - MDN and URLPattern - WICG.

Although it is supported by Next.js' edge runtime, it is not implemented in Node.js and TypeScript:

• add URLPattern type in DOM or something lib? microsoft/TypeScript-DOM-lib-generator#1199
• implement URLPattern nodejs/node#40844

@Kikobeats Maybe we should include the type definition for URLPattern?

• URLPattern not available in lib.dom.d.ts denoland/deno#12558
• fix(cli): add dom.extras lib denoland/deno#14430
• https://github.com/kenchris/urlpattern-polyfill/blob/main/src/types.d.ts

[jonahallibone]

@SukkaW It would be great if you guys could add the TypeDef!

[balazsorban44]

Related #38103. Thanks for reporting, we are reviewing this. 👍

[jonahallibone]

@balazsorban44 it seems like that PR got closed without a merge, safe to say that we'll still get this in the future? Probably won't upgrade to 12.2 until the edge globals are available

[balazsorban44]

Already working on it!

[javivelasco]

Thanks for reporting this! We thought of a nice solution and we are working on it like @balazsorban44 said. Coming ASAP!

[szaveri]

Recently upgraded to NextJS 12.2.0 and as a workaround for anyone looking to upgrade (plan to change this once this issue is resolved)

import type { URLPattern } from 'types/urlpattern';

export const setPatterns = (pattern: string): Pattern => [
  [
    /* eslint-disable no-undef */
    // @ts-expect-error
    new URLPattern({ pathname: pattern }) as URLPattern,
    ({ pathname }) => pathname.groups,
  ],
];

with the type definition here https://github.com/kenchris/urlpattern-polyfill#api-reference

I created a custom Pattern interface as well to match the output expected in https://nextjs.org/docs/messages/middleware-upgrade-guide#after-3

interface PatternHandlerResult {
  [key: string]: string | undefined
}
export interface Pattern extends Array<[URLPattern, (pathname: URLPatternResult) => PatternHandlerResult]> {}

[jonahallibone]

Any update on this? I am going to implement @szaveri's solution ASAP because not upgrading our middleware is starting to affect our billing on Vercel (since changes to middleware quota's coincided with the 12.2.0 release).

[sannajammeh]

Workaround:
npm i urlpattern-polyfill -D

In global.d.ts or any other d.ts file (make sure its a d.ts to avoid accidentally including this polyfill's JS code)

declare global {
  import URLPattern from "urlpattern-polyfill";
}

[zenyr]

In global.d.ts or any other d.ts file (make sure its a d.ts to avoid accidentally including this polyfill's JS code)

Or you can safely add this to �globals.d.ts right next to next.config.js

/// <reference types="urlpattern-polyfill" />

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