fix: assign globals to self (#1823)

* fix: assign globals to `self`

* chore: add demo

* chore: better wording

* chore: better wording

* fix: fix TypeError

* style: lint

Co-authored-by: Erica Pisani <[email protected]>

Author: ascorbic

demos/middleware/middleware.ts

@@ -1,6 +1,9 @@
 import { NextResponse } from 'next/server'
 import { MiddlewareRequest, NextRequest } from '@netlify/next'
 
+// Next.js replaces this with a stub polyfill. This import is just to test that stub.
+import pointlessFetch from 'isomorphic-unfetch'
+
 export async function middleware(req: NextRequest) {
   let response
   const { pathname } = req.nextUrl
@@ -58,6 +61,12 @@ export async function middleware(req: NextRequest) {
   }
 
   if (pathname.startsWith('/shows')) {
+    if (pathname.startsWith('/shows/222')) {
+      response = NextResponse.next()
+      const res = await pointlessFetch('http://www.example.com/')
+      response.headers.set('x-example-server', res.headers.get('server'))
+    }
+
     if (pathname.startsWith('/shows/rewrite-absolute')) {
       response = NextResponse.rewrite(new URL('/shows/100', req.url))
       response.headers.set('x-modified-in-rewrite', 'true')

demos/middleware/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@netlify/next": "*",
     "@netlify/plugin-nextjs": "*",
+    "isomorphic-unfetch": "^3.1.0",
     "next": "^13.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -24,4 +25,4 @@
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.3"
   }
-}
+}

package-lock.json

@@ -85,8 +85,6 @@ import {
 // Deno defines "window", but naughty libraries think this means it's a browser
 delete globalThis.window
 globalThis.process = { env: {...Deno.env.toObject(), NEXT_RUNTIME: 'edge', 'NEXT_PRIVATE_MINIMAL_MODE': '1' } }
-// Next uses "self" as a function-scoped global-like object
-const self = {}
 let _ENTRIES = {}
 
 // Next.js uses this extension to the Headers API implemented by Cloudflare workerd
@@ -118,6 +116,10 @@ const fetch = async (url, init) => {
   }
 }
 
+// Next edge runtime uses "self" as a function-scoped global-like object, but some of the older polyfills expect it to equal globalThis
+// See https://nextjs.org/docs/basic-features/supported-browsers-features#polyfills
+const self = { ...globalThis, fetch }
+
 `
 
 // Slightly different spacing in different versions!

packages/runtime/src/helpers/edge.ts

@@ -6,6 +6,17 @@ import { buildResponse } from '../edge-shared/utils.ts'
 globalThis.NFRequestContextMap ||= new Map()
 globalThis.__dirname = fromFileUrl(new URL('./', import.meta.url)).slice(0, -1)
 
+// Next.js uses this extension to the Headers API implemented by Cloudflare workerd
+if (!('getAll' in Headers.prototype)) {
+  Headers.prototype.getAll = function getAll(name) {
+    name = name.toLowerCase()
+    if (name !== 'set-cookie') {
+      throw new Error('Headers.getAll is only supported for Set-Cookie')
+    }
+    return [...this.entries()].filter(([key]) => key === name).map(([, value]) => value)
+  }
+}
+
 // Check if a file exists, given a relative path
 const exists = async (relativePath) => {
   const path = fromFileUrl(new URL(relativePath, import.meta.url))