Polyfill URLPattern (#398)

apps/web/package.json

@@ -70,6 +70,7 @@
     "react-i18next": "^16.1.4",
     "recharts": "2.15.3",
     "tailwind-merge": "^3.3.1",
+    "urlpattern-polyfill": "^10.1.0",
     "zod": "^3.25.74"
   },
   "devDependencies": {

apps/web/proxy.ts

@@ -2,7 +2,6 @@ import type { NextRequest } from 'next/server';
 import { NextResponse } from 'next/server';
 
 import { CsrfError, createCsrfProtect } from '@edge-csrf/nextjs';
-import { URLPattern } from 'node:url';
 
 import { isSuperAdmin } from '@kit/admin';
 import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
@@ -36,7 +35,7 @@ export async function proxy(request: NextRequest) {
   const csrfResponse = await withCsrfMiddleware(request, response);
 
   // handle patterns for specific routes
-  const handlePattern = matchUrlPattern(request.url);
+  const handlePattern = await matchUrlPattern(request.url);
 
   // if a pattern handler exists, call it
   if (handlePattern) {
@@ -130,7 +129,14 @@ async function adminMiddleware(request: NextRequest, response: NextResponse) {
 /**
  * Define URL patterns and their corresponding handlers.
  */
-function getPatterns() {
+async function getPatterns() {
+  let URLPattern = globalThis.URLPattern;
+
+  if (!URLPattern) {
+    const { URLPattern: polyfill } = await import('urlpattern-polyfill');
+    URLPattern = polyfill as typeof URLPattern;
+  }
+
   return [
     {
       pattern: new URLPattern({ pathname: '/admin/*?' }),
@@ -195,8 +201,8 @@ function getPatterns() {
  * Match URL patterns to specific handlers.
  * @param url
  */
-function matchUrlPattern(url: string) {
-  const patterns = getPatterns();
+async function matchUrlPattern(url: string) {
+  const patterns = await getPatterns();
   const input = url.split('?')[0];
 
   for (const pattern of patterns) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.19.1",
+  "version": "2.19.2",
   "private": true,
   "sideEffects": false,
   "engines": {

pnpm-lock.yaml

@@ -276,6 +276,9 @@ importers:
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
+      urlpattern-polyfill:
+        specifier: ^10.1.0
+        version: 10.1.0
       zod:
         specifier: ^3.25.74
         version: 3.25.76
@@ -8529,6 +8532,9 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  urlpattern-polyfill@10.1.0:
+    resolution: {integrity: sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==}
+
   urql@4.2.2:
     resolution: {integrity: sha512-3GgqNa6iF7bC4hY/ImJKN4REQILcSU9VKcKL8gfELZM8mM5BnLH1BsCc8kBdnVGD1LIFOs4W3O2idNHhON1r0w==}
     peerDependencies:
@@ -17491,6 +17497,8 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  urlpattern-polyfill@10.1.0: {}
+
   urql@4.2.2(@urql/core@5.2.0(graphql@16.11.0))(react@19.2.0):
     dependencies:
       '@urql/core': 5.2.0(graphql@16.11.0)