Skip to content

fix: add missing data to middleware request object #1634

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 7 commits into from
Sep 28, 2022

Conversation

ericapisani
Copy link

@ericapisani ericapisani commented Sep 22, 2022

Summary

When the middleware runs on the edge, it's missing data that is hydrated by the NextServer when run in the context of the origin server.

Also fixes which property is accessed on nextURL in the context of the MiddlewareRequest.

Test plan

Test site

Can also do the following:

  • pull this branch
  • Update the next.config.js of the middleware demo to include the following:
  i18n: {
    locales: ["en-US"],
    defaultLocale: "en-US",
  }
  • Add a console.log below this line referencing the locale and defaultLocale
  • Confirm that the values are en-US

Note: It's a known issue that the middleware example isn't working entirely as expected and are not related to these changes. For instance, the path to set the netlifyCookie via the 'Cookies API' route isn't setting the cookie properly, although the user will be routed to the correct page. Issue for this has been created here

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

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

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.

When the middleware runs on the edge, it's missing data
that is hydrated by the NextServer when run in the context of the origin server.

Also fix which property is accessed on nextURL in the context of the MiddlewareRequest.
@ericapisani ericapisani added the type: bug code to address defects in shipped code label Sep 22, 2022
@ericapisani ericapisani self-assigned this Sep 22, 2022
@netlify
Copy link

netlify bot commented Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-demo/deploys/63343f057f968f0008174786
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-static-root-demo/deploys/63343f058a4bcf00086c415c
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-export-demo/deploys/63343f05f052d800096e4574
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-nx-monorepo-demo/deploys/63343f0583f293000802b386
😎 Deploy Preview https://deploy-preview-1634--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.

@netlify
Copy link

netlify bot commented Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-edge-middleware/deploys/63343f05f052d800096e4579
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

Deploy Preview for next-hp-edge-demo ready!

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/next-hp-edge-demo/deploys/63343f058a4bcf00086c4162
😎 Deploy Preview https://deploy-preview-1634--next-hp-edge-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.

@@ -81,10 +82,11 @@ const handler = async (req: Request, context: Context) => {
const request: RequestData = {
headers: Object.fromEntries(req.headers.entries()),
geo,
url: url.toString(),
url,
Copy link
Author

Choose a reason for hiding this comment

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

This changes addresses the missing pathname property on req.nextURL

@netlify
Copy link

netlify bot commented Sep 22, 2022

Deploy Preview for next-plugin-rsc-demo ready!

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-rsc-demo/deploys/63343f0505635400090137c7
😎 Deploy Preview https://deploy-preview-1634--next-plugin-rsc-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 Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/netlify-plugin-nextjs-next-auth-demo/deploys/63343f0560be8c00081c8a28
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

Deploy Preview for next-plugin-canary ready!

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-canary/deploys/63343f0559ed490008c9314c
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

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

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/nextjs-plugin-custom-routes-demo/deploys/63343f0505635400090137cc
😎 Deploy Preview https://deploy-preview-1634--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 Sep 22, 2022

Deploy Preview for next-i18next-demo ready!

Name Link
🔨 Latest commit d925520
🔍 Latest deploy log https://app.netlify.com/sites/next-i18next-demo/deploys/63343f05a07d6000088e125b
😎 Deploy Preview https://deploy-preview-1634--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.

@netlify
Copy link

netlify bot commented Sep 23, 2022

Deploy Preview for next-plugin-app-dir failed.

Name Link
🔨 Latest commit 154bff2
🔍 Latest deploy log https://app.netlify.com/sites/next-plugin-app-dir/deploys/632e0d0ac74a0a0008bbc793

@ericapisani ericapisani marked this pull request as ready for review September 23, 2022 16:39
@ericapisani ericapisani requested a review from a team September 23, 2022 16:39
@@ -48,6 +48,12 @@ Next.js Middleware works out of the box on Netlify. By default, middleware runs
support for running Middleware at the origin, set the environment variable `NEXT_DISABLE_NETLIFY_EDGE` to `true`. Be
aware that this will result in slower performance, as all pages that match middleware must use SSR.

### Limitations

Due to how the site configuration is handled when it's run using Netlify Edge Functions, data such as `locale` and `defaultLocale` will be missing on the `req.nextUrl` object when running `netlify dev`.
Copy link
Contributor

Choose a reason for hiding this comment

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

When you say "such as", does that mean there are other things missing?

Copy link
Author

Choose a reason for hiding this comment

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

I haven't yet done an audit of all the properties that are affected by this so I'm not 100% certain that these are the only properties affected on the nextUrl object.

Something to add here as well but the pathname (as reported by the user who originally raised this issue with us) was also incorrect before these changes and should be mentioned.

@@ -0,0 +1,2 @@
// eslint-disable-next-line n/no-unpublished-require
require('jest-fetch-mock').enableMocks()
Copy link
Author

Choose a reason for hiding this comment

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

Without this package and setup, the Request and Headers objects aren't found in the context of the test file that was added (request.spec.ts)

@kodiakhq kodiakhq bot merged commit 0c05726 into main Sep 28, 2022
@kodiakhq kodiakhq bot deleted the ep-inconsistent-edge-func-behaviour branch September 28, 2022 14:54
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.

4 participants