Skip to content

fix: assign globals to self #1823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Dec 2, 2022
Merged

fix: assign globals to self #1823

merged 9 commits into from
Dec 2, 2022

Conversation

ascorbic
Copy link
Contributor

@ascorbic ascorbic commented Dec 1, 2022

Summary

Next.js middleware and edge functions define self as a global-like, function-scoped object. However some of Next's built-in polyfill stubs expect self to have browser globals. These polyfills aren't supposed to be needed in edge runtime, but Next automatically includes them if a site has certain dependencies (e.g. unfetch). This means that for those sites, edge functions were failing because those globals were missing.

This PR adds globals to self, meaning they're available if the polyfill needs them.

Test plan

This PR adds isomorphic-unfetch to the middleware demo site, to simulate this bug. To test it, visit the middleware demo and load /shows/222. The response headers should include x-example-server.

Relevant links (GitHub issues, Notion docs, etc.) or a picture of cute animal

capy and puppies

Fixes https://github.com/netlify/pod-ecosystem-frameworks/issues/315

Standard checks:

  • Check the Deploy Preview's Demo site for your PR's functionality
  • Add docs when necessary

🧪 Once merged, make sure to update the version if needed and that it was published correctly.

@ascorbic ascorbic requested a review from a team December 1, 2022 12:58
@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for netlify-plugin-nextjs-export-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/638a0934c6386400083966e0
😎 Deploy Preview https://deploy-preview-1823--netlify-plugin-nextjs-export-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for nextjs-plugin-custom-routes-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/nextjs-plugin-custom-routes-demo/deploys/638a0934d42517000978b2fc
😎 Deploy Preview https://deploy-preview-1823--nextjs-plugin-custom-routes-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for netlify-plugin-nextjs-static-root-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/638a0934228603000853a74a
😎 Deploy Preview https://deploy-preview-1823--netlify-plugin-nextjs-static-root-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for netlify-plugin-nextjs-next-auth-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/638a0934282b7f000a25b8b5
😎 Deploy Preview https://deploy-preview-1823--netlify-plugin-nextjs-next-auth-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for netlify-plugin-nextjs-nx-monorepo-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/638a0934461f0a000b4e3c07
😎 Deploy Preview https://deploy-preview-1823--netlify-plugin-nextjs-nx-monorepo-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions github-actions bot added the type: bug code to address defects in shipped code label Dec 1, 2022
@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for netlify-plugin-nextjs-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/638a09356538460008f63d98
😎 Deploy Preview https://deploy-preview-1823--netlify-plugin-nextjs-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/638a09350d144e0007d92f02
😎 Deploy Preview https://deploy-preview-1823--next-plugin-canary.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for next-plugin-edge-middleware ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/638a09344dae8200087408cf
😎 Deploy Preview https://deploy-preview-1823--next-plugin-edge-middleware.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Dec 1, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit 10ff24e
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/638a0934613ec10009e853d4
😎 Deploy Preview https://deploy-preview-1823--next-i18next-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@ascorbic ascorbic self-assigned this Dec 1, 2022
Copy link

@ericapisani ericapisani left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small thing.

I also tried tested in a local environment (ntl dev) and ran into a TypeError:

TypeError: this._headers.getAll is not a function

full stack trace for debugging:

[next-dev] TypeError: this._headers.getAll is not a function
    at new ResponseCookies (file:///Users/ericapisani/netlify/next-runtime/demos/middleware/.netlify/middleware.js#10:809:39)
    at new NextResponse2 (file:///Users/ericapisani/netlify/next-runtime/demos/middleware/.netlify/middleware.js#10:998:20)
    at Function.next (file:///Users/ericapisani/netlify/next-runtime/demos/middleware/.netlify/middleware.js#10:1053:16)
    at middleware (file:///Users/ericapisani/netlify/next-runtime/demos/middleware/.netlify/middleware.js#10:1632:45)
    at Object.handler [as function] (file:///Users/ericapisani/netlify/next-runtime/demos/middleware/.netlify/edge-functions/next-dev/index.js:75:28)
    at async FunctionChain.runFunction (https://637cf7ce9214b300099b3aa8--edge.netlify.app/bootstrap/function_chain.ts:298:24)
    at async FunctionChain.run (https://637cf7ce9214b300099b3aa8--edge.netlify.app/bootstrap/function_chain.ts:251:22)
    at async handleRequest (https://637cf7ce9214b300099b3aa8--edge.netlify.app/bootstrap/handler.ts:59:22)
    at async Server.#respond (https://deno.land/[email protected]/http/server.ts:298:18)

@@ -118,6 +116,9 @@ 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
const self = { ...globalThis, fetch }

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Could we add a permalink to where the Next stub polyfill replacement occurs in case we need to investigate something related to it in the future?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added a link to the docs

@ascorbic
Copy link
Contributor Author

ascorbic commented Dec 1, 2022

@ericapisani Was that with framework=#static? Because if not then it's not using this code. It sounds like we need to add a getAll polyfill to our dev function too

@ericapisani
Copy link

@ascorbic It wasn't when I originally posted my comment but trying it again with framework=#static still results in the same error

@kodiakhq kodiakhq bot merged commit 993766b into main Dec 2, 2022
@kodiakhq kodiakhq bot deleted the mk/self-global branch December 2, 2022 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
automerge type: bug code to address defects in shipped code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants